I am trying to find a solution of the IE white flash in a meteor app.
The website is this one (note that it's in closed beta).
IE9 gives a very bad user experience, and while I don't think it will ever be as good as with more modern browser, I really think some issues should be resolved.
And I think that the white flash on page change it's the worst one.
Basically for every action that changes the url, the page redraws itself and flashes white for a few milliseconds.
I've read other topics and tried to apply some of the suggest fixed, but nothing worked.
I've tried to insert
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
But I think it does nothing on IE9 or in this case.
I also tried to set the background of html and body to dark gray, it did nothing.
I'm actually not sure what else should I try and if this is a common issue when building website with realtime, modern frameworks.
Thanks in advance.
P.S. I also found this issue in iron-router, and it seems that IE<10 trigger a full page refresh every time, and probably that's the main cause of what I'm seeing, because Meteor needs a bit of time to load itself, thus leaving the page blank while it's doing it's magic.
this meta tags
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
not supported in IE9.
As solution for you example you can use compatibility with IE8
you can add
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Related
Question: what might be the cause of the iframe not working properly only on IOS, iphone?
It seems like it's zooming in automatically, but that is not the intention
How can this be fixed?
Sounds like the viewport issue to me.
I've seen this before... Here is a solution that might work for you in this case.
<meta name="viewport" content="width=device-width, user-scalable=no" />
Add/modify this tag in your and let me know if it works.
Note that by doing this you will be removing the option for the user to pinch and zoom on your site. Most the time you don't have to care about that but some users depend on the functionality.
Some of my CSS wont work in IE8 but will work in chrome,firefox,IE11.
I first made the website on chrome and then realized it didnt work in ie11 so I put code into the html like the code below...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
After putting this, my website works on ie11. Later to find out, that it does not work on ie8.
I am making this website for my company and all around the company ALL the staff use different browsers, so I need to make sure it works on all.
Do I have any hope? or do I have to give up on this one? I have researched all over google about everyone different code inserts they put in for it to work on ie8 but it doesnt work.
In my CSS im using stuff such as border-radius and box-shadow and many many more.
Is there an alternative... to say, "if you are using ie8 to display this website, display this piece of code differently to suit the browser."
Thanks
What you are basically looking for is "graceful degradation". Check out some articles about that here:
https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
http://searchnetworking.techtarget.com/definition/graceful-degradation
In any case, keep in mind that making a modern page work on IE8 is a tedious task, and most likely unnecessary. The global market share for IE8 is currently around 1%, so you really have to consider if you do that extra work.
I have a website which displays fine on all browsers (even lower versions of IE than IE10). But, on IE10, the images are having rendering issues like the screenshot attached below. If would have random colored bars on it at random times, but once refreshed it would be okay. I don't have any Javascripts on the page, just the styling to display the images. Any ideas? I tried googling and on StackOverflow but no luck. Do I need to put some sort of meta tags?
Check about "Compatibility View" Option.
and why don't you try the edge meta tag?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
HTML5Boiler plate suggests we put this one in our HTML page if we favour Chrome over IE
(which is my case)
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
We all understand how it works.
If the user is using IE but it has also installed the Chrome Frame the chrome frame will be used to run the page (which is probably much faster when it comes to execute my js)
The question: is there any 'bad' side effect ?
any particular reason why I should not add that snippet ?
Thanks
The only downside I know about this snippet is that validators don't accpet yet the content value of this meta (even if they should), so if it seems annoying to you, just remember you can also specify it inside an .htaccess (as suggested also on html5 boilerplate site)
See https://gist.github.com/1292092 for an example of htaccess inclusion
See also this thread about meta validation
This does not have any downsides.
This will force the browser to render as properly as it can, ignoring those awful IE Compatibility modes.
This will not break the browser, just peacfully explain to it, that this page doesn't wish to be experimented with, and just to be shown properly.
There are in fact downsides to this meta tag (along with conditional comments) which is why we recommend you reference it from the server. See this issue for details.
I was googling, about how to fix compability problem ....
and i get this to force ie8 to latest version ie
<meta http-equiv="X-UA-Compatible" content="IE=edge;/>
in my mind ...
is it posible to force any user agent.
let say from any browser to firefox
example <meta http-equiv="X-UA-Compatible" content="FF=edge;/> or else
Heh, clever thjnking! :) But no, this is not possible.
The X-UA-Compatible header is proprietary, and can be used only to switch between various versions of the same browser engine (At the moment, it is supported only by IE, as far as I know).
You'll have to go the hard route and adjust the CSS so it works in all browsers (or serve different style sheets for different browsers).
As far as I know this line works also for non IE browsers, for example you can use something like this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
to force the use of Chrome rendering if available, or the last verison of IE of not. This code is completely valid but I'm not 100% sure what it means and what it really does :)
I have done some google research but I haven't found nothing concrete about it so I think is not a good idea relying only on this line of code for cross-browser compatibility. Personally I insert this code on my sites because it can do no harm :)
Hope it helps.