Forum Moderators: not2easy
Right, so I'm in the process of putting together a browser game. Without going into lengthy detail, users will move from one screen to another via a series of links.
All seems to be going well, and I'm happy with the layout and project, however, I've begun to notice an irritating quirk. Please take a look at this cut-down example: <>
Here you can move between three pages using the links. In real browsers this movement is smooth, but in IE7 movement between pages gives a nasty blink or flicker; a sort of horizontal flash somewhere (position changes) on screen whenever the page is changed. This is a whole pile of not good.
At first I thought my problem was in using background images (specifically the background.png that forms the backdrop, and wrapperback.png that is the background image of the game when being played). Note that both these background images do not change from page to page, so it isn't due to IE not loading the information fast enough.
I've been playing about with this for a little while now, and still can't solve it, but I'm increasingly of the opinion that there's something up with my CSS that isn't rendering properly or quickly enough on IE.
Any ideas?
[edited by: SuzyUK at 1:21 pm (utc) on May 31, 2008]
[edit reason] no personal URI's please, see charter [/edit]
sorry your link has been removed per our Charter and Forum Guidelines (see links at top of page)
However I had a look and confirm what you describe, If the pages are identical (which I think they are) then maybe post the code
2 x things to check first, there is an intermittent IE BUG called Flash of Unstyled Content (FOUC) which this is similar too, except it's not intermittent on your pages you can look it up and try some of the suggested fixes for it (i.e. add an empty script element just before the </head> tag.. although in your pages you're already using the <link> method of calling your stylesheets, so I'm not convinced it's that
or it could be a caching issue.. not sure about IE7 settings but there used to be an IE browser setting "check for images on every visit to page" or something like that, which used to cause people some "flicker" problems in IE6, though I haven't heard of it much with IE7.. I would need to look some more but maybe this will help point you in the direction?
it *could* be the absolute positioning method you're using the center the mainwrapper, just a stab in the dark but that's just the first thing I would test if I had to get to testing CSS, - I know you probably want it for centering, H&V but for a test to see if the positioning is doing it simply comment out that line
Is it also happening on a local set up, or just on the your server, and is it all IE's?
let us know how you go ..
adding this IE Only meta tag stops the flicker:
<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)">stops all flickers apparently, I tested it with your pages set up locally and it does seem to work!
SuzyUK, you are utterly stunning! Thankyou, thankyou, thankyou! That solution has stopped all flickering entirely on IE. I can't believe (a) I'd never considered that tag, and, (b) the solution was so simple.
Thankyou very, very much.
