Email conversation
| From | Lance Clarke |
|---|
| To | Me |
|---|
| Subject | Image Flicker: How you can resolve the Image Flicker problem in IE |
|---|
| Date | 29 September 2004 12:38 |
|---|
Hello:
I found your article on 'background-attachment: fixed;' very helpful and I
would like to return the favor.
Regarding your statement: 'It may also appear a little jumpy in IE, but you
have a choice; slightly jumpy effect, or completely broken effect.' This
can be fixed by forcing your server to send a 'Cache-Control' header to IE
which forces the images to load from the local cache instead of being
reloaded from the server each time. The problem is definitely with IE, but
the fix is done at the server.
I have used the method discussed here:
http://xxxxxxxxxxxxxxx.xxx/xxxx/xxxxxxxxxxxxxxxxxxxxxxxx.xxxx on my /Images/
folder (IIS 5.0 server) and it resolved all flickering issues in all effects
where they had the problem (roll overs, hovers, fixed images, etc.). There
is also a way to do this on Apache if that is your flavor of server.
I hope you find this information useful.
Thank you,
-Lance
| From | Me |
|---|
| To | Lance Clarke |
|---|
| Subject | Re: Image Flicker: How you can resolve the Image Flicker problem in IE |
|---|
| Date | 29 September 2004 13:29 |
|---|
Lance,
thanks for the info, and glad you found the article interesting.
I'm afraid that this problem has nothing to do with images being loaded
from the server (a quick check using proxomitron shows that there is
absolutely no server communication going on). The jumpy effect also
persists even when using file:// protocol, where IE has a direct connection
to the files (just as if they remained in cache).
I am aware of the background hover flicker, and how it is caused by failure
to use cached images, but this is a different issue. The reason it is jumpy
is because it uses expressions to set the image position. Expressions take
a while to be evaluated after a change in environment, such as a resize or
scroll.
As a result, the image is momentarily shown in its old location before it
jumps to the new location after a scroll.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Lance Clarke |
|---|
| To | Me |
|---|
| Subject | Re: Image Flicker: How you can resolve the Image Flicker problem in IE |
|---|
| Date | 1 October 2004 00:28 |
|---|
Hi Mark;
That's interesting, and makes perfect sense. In my practical experience
though, I've noticed that image caching did make a difference when using
expressions. The difference may be that they are direct expressions, and
not expressions that call external scripts. For example:
(From my site: http://www.t-clan.us/)
#Outer
{
HEIGHT: expression(document.body.clientHeight - 84 + 'px');
WIDTH: expression(document.body.clientWidth - 84 + 'px');
}
(Note the 4-sided, fluid borders.)
(From my site: http://www.mollyandthetinker.com/)
* html body #LeftColumn,
* html body #TopRow,
* html body #TopLeft
{
POSITION: absolute;
TOP: expression(offsetParent.scrollTop);
}
(Note the top and left fixed green areas and the fixed menu)
On this last one especially, before caching the images the flicker was
terrible. So much so that I almost gave up on the idea entirely. But once
I enabled caching, the flicker stopped completely. As a matter of fact, let
me demonstrate it for you. I disabled caching on my dev server for that
second site. Compare http://xxx.xxxxxxxxxxxxxxxxx.xxx/ and
http://xxxxx.xxxxxxxxxxxxxxxxx.xxx/ and let me know if you see a difference.
I think that in the case of complex calculations like you're doing, you
can't eliminate the flicker problem completely for the reasons you stated.
But being in the US, when I try to scroll your demo in IE, I actually have a
1-2 second wait for the images to reload. I think if you cached them, the
flicker would be at least minimized somewhat.
Lance