I have a Rails 3.2 project with Foundation 4 and I need to support Internet Explorer 8.
To enable the media queries in IE8 needed by the Foundation 4 grid I included Respond.js.
I tested in IE8, but the layout remained the small devices layout. The respond.js testpage worked fine in IE8.
Why isn't the Foundation grid properly loaded in IE8?
I previously enabled sass support in Google Chrome and had config.sass.debug_info = true in environments/development.rb and the resulting #media -sass-debug-info apparently aren't processed by respond.js.
Changing config.sass.debug_info to false, emptying the tmp/cache/ project folder and restarting the rails server solved this issue.
edit
Apparently I also have to set
config.sass.debug_info = false
config.sass.line_comments = false
to completely disable the sass debug media queries.
I had the problem that IE8 doesn't seem to like the #import-property.
We used a global css file which imported the necessary styles. When moving all stylesheets to the assets pipeline via =* require custom.css it all started working
It's weird though, the regular bootstrap styling (buttons, backgrounds and such) got imported properly. The grid system was not. I guess Internet Explorer works in mysterious and retarded ways.
Related
I am customizing iNotes (Notes web mail client), adding some features using javascript that require ajax calls to external sources. In doing so I have found Internet Explorer won't perform CORS (cross-origin) requests. Errors are either access denied or some other security errors depending on how it's called. Chrome and FF and Safari all work.
I have found what I believe to be the culprit, iNotes adds a meta-tag to emulate IE9.
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
For CORS requests, IE9 does not support XMLHttpRequest, rather you must use XDomainRequest, which was only supported in IE8 and IE9. Since it's emulating IE9, the XMLHttpRequest (or jQuery .ajax calls for that matter) don't work.
I have not been able to find any way to remove that meta tag, I did a search on the mail file and there are no matches for IE=EmulateIE9 that I could find. And I'm sure if I did remove it, I would break something in iNotes.
I didn't want to load jQuery, but may do so for this script and include the moonscript plugin which uses XDR for ie8 and ie9 browsers. If iNotes is ever updated, it will still work.
Anyone else run into this problem and find a better solution?
Lothar Mueller pointed me in the right direction.
Domino 9.0.1 Fix Pack 5 adds a Forms9s.nsf which allows you to get rid of "Quirks Mode" for IE backwards compatibility. After installing the FP, the new forms9s.nsf file is installed, then you update the notes.ini with
iNotes_WA_DefaultFormsFile=iNotes/Forms9s.nsf
iNotes_WA_FormsFiles=iNotes/Forms9s.nsf
and it eliminates the emulation tag for IE. I still have to test my iNotes customization apps, but this gives an option for running some IE features that didn't work before such as Ajax requests from iNotesExt_9.nsf, etc.
It seems that dajax is hi-jacking the ajax requests from django-debug-toolbar
Is there anyway to work around this or a known solution?
To fix this issue, set DAJAXICE_XMLHTTPREQUEST_JS_IMPORT = False in your Django project settings.
By default, Dajaxice includes the XmlHttpRequest.js library:
dajaxice.core.js template
__init__.py
If you disable the inclusion of this third party javascript library, the Django Debug Toolbar can load panels properly. I have not noticed any issues with Dajaxice with the XmlHttpRequest.js library excluded- I believe it is only for compatibility with old IE browsers, though I'm not certain.
I am using a bootstrap 3 template and have noticed on some that scrolling is not smooth and kind of bumpy. I am not even sure what to look for. This only happens in Chrome. It does NOT happen in Safari or Firefox.
Is this a javascript or css problem? I have never run across this before.
This seems to happen worse in Chrome for mac, but also happens in chrome for windows.
It seems to happen when I make the window smaller and then make it bigger again. If I leave the window the same size, it seems to scroll fine.
Link:
http://demo.phppointofsalestaging.com --> Click Sales then resize the window in Chrome and then scroll down and then up. You will notice it is very bumpy and not smooth
:root { scroll-behavior: auto; }
Add this simple code to your custom CSS file.
"scroll-behavior" declared as "smooth" in bootstrap css/bootstrap.reboot.css.
So we need to overwrite it using our custom css.
The problem is in the jquery.nicescroll plugin that is used with the theme, the function jQuery.fn.scrollTop make the problem, it takes more than 75% from the cpu when run. my solution is :
You are using the jquery.nicescroll plugin version 3.4.0 use the latest version currently version 3.5.0 available.
If not working as expected, downgrade to version 3.2.0 I'm using it with my site without any problem.
Also check that if the hwacceleration in the Configuration parameters of the plugin is set to (default: true).
Update 1:
nicescroll plugin is a solution to have a custom scrollbars compatible with desktop, tablet and phone devices and to override the default scrollbars of the browser " more information her ", "you didn't see the diffrence because the plugin used in your project works when your browser window under 767px" so another solution if you don't need it you can remove the plugin from your files by following this steps:
Delete the plugin file (jquery.nicescroll.js) from your script folder.
Delete the plugin link from all your files.
Delete the plugin function lines (21 to 36), (49 to 66), (149) from (unicorn.js) file.
Update 2:
I made some tweaks for the (unicorn.js), download it from her, then replace your original one.
Hope this will help you.
I just completed a site: http://www.justcelebrations.co.in . I haven't launched it yet because of certain problems. The site uses css3 text gradients to style text in span and border radius to style most divs. It has to be made dynamic later so I don't want to change the text effects to images or something. The problem I am facing is that the site hangs IE8. I haven't tested it in lower versions of IE. I have tested the markup thoroughly and its validated and the css too is valid except for features which are from css3 like opacity, border-radius etc. I have also added google script to make ie behave properly and mordenizer library. The site still hangs IE8. Please Help me out here..
EDIT: after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9]
and it worked!
after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9] and it worked!
Can you add <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> to target fixes. As you make changes view in IE8 through IE9(F12) and play with -ie-(compared to -moz- & -o-) in your css. I would also keep a CSS 2.1 file and a CSS3 file to keep track of your new code.
It's working good here in Safari. Just to narrow this down, what if you remove all the conditional and IE specific libraries you got from Google? In my experience, all the various JS libraries that are supposed to make older IE versions behave always seem to break or conflict with some other script or library like jQuery.
Also see the answer in this thread for optimizing your page loading by placing the JavaScripts at the end of the <body> section. Perhaps in your case, loading the JS last will make some kind of difference to Explorer.
It looks like IE7 doesn't reload the latest version of my stylesheet each time I upload a new version on the server.
This is annoying as I am debugging my .css file to make it work on IE...
Tried to empty the browser cache but still not working.
Thanks for your help.
Ctrl-F5 - forcible way to reload in IE
Include your version number in the file name. myfile_v1234.css
When testing, every time you do an update you can just wite "stylesheet.css?r=98123"
As long as the query string is different, it'll be downloaded again.
If you need, you can use javascript to append Math.random(), to get the random number. Not required on production though, when updates would be stable.
2 Questions:
Does IE eventually load with the newer stylesheet?
How are you saving the changes to the server (SSH, Web Interface, etc.)?
I ask because I ran into an issue with a web-based file management system a while back where one browser would show the CSS just fine, the other wouldn't, and we noticed the issue of which browser played nicely depended on which browser we used to upload the CSS.
The reason turned out to be that IE gave the CSS file a different MIME type than Firefox. If you continue to notice the issue even when you've cleared the cache, check the MIME type of the file using Firefox by going to Tools > Page Info.
Also, if it is simply a caching issue, consider turning caching off in IE. I believe this should be an Advanced Option under Internet Options.
Also, you may want to try creating a special developer environment for IE (if it comes down to it.) Perhaps have another machine with IE7 and no caching and any other features turned off (A kiosk mode, perhaps), and then previewing the page on that machine.
Thanks to you all!
I did manage to solve my problem with the "stupid" Ctrl+F5, and by changing the Internet Parameters of Windows to reload content every new visit.