Image flicker in IE 6

By    John Garner on  Tuesday, July 25, 2006
Summary: I'd had this problem before and it still seems to come back and bite you. Internet Explorer 6 is still going to be around for a while so you can't just ignore it. I was at one of my best mates, showing him a personal site I'm working on. As you can see below the […]

I'd had this problem before and it still seems to come back and bite you. Internet Explorer 6 is still going to be around for a while so you can't just ignore it.

I was at one of my best mates, showing him a personal site I'm working on.
As you can see below the initial state of the menu is all grey. When you move it's supposed to bring the menu to life with colours 😉
However from State 0 (initial state) to State 2 (expected effect) there is an intermediary state in IE 6 State 1, where the little (icon) column preceding the menu elements is not visible, but should be!

Initial state (0):
Initial State before mouse hover

Mouse over effect (2):
Mouseover effect

IE6 flicker effect (1):
IE6 flicker Effect

The flicker effect in IE is consistent. Every time you hover over the image it calls the server to download a the hover state image once again. So if you go up and down a menu with 5 elements twice IE 6 will go and fetch the hover image 20 times !

I initially started with the column, preceding the menu elements, slightly smaller. Then I tried to do a cross type icon for elements with sub menus. The problem was that it looked like a RIP symbol so I moved back to a square type icon. I realised I liked the taller column (without the horizontal line) and kept a smaller (square type) one for the 'active' click by mistake. The active effect, moving from the tall to the square column, looks nice so I kept it like that.

Active, mouse down effect (3)
active mouseover

I remembered having come across a fix for this on a previous site that required a few lines of code in the httpd.conf or .htaccess

This is the code that needs to be added :
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

You can also add this :
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

And as a comment on hicksdesign.co.uk explains you can also use this :
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif "access plus 4 hours"
ExpiresByType image/jpeg "access plus 4 hours"
ExpiresByType image/png "access plus 4 hours"

You can also use "access plus 1 month" for example...

If you have access to the httpd.conf (I couldn't get this to work via a vhost file) then you can add :
LoadModule expires_module modules/mod_expires.so

This 'should' stop the constant calls to the server. There may be an initial case of the image missing on the first hover (before it has loaded the image) but then it should no longer call the server for each hover.

Code was found at Dean Edwards, the IE guru and a comment posted on Jon Hicks blog in an article about a menu that wasn't behaving...

A word of advice : if you are developing a site, test this and then comment it out until the site is finished. It's highly likely you will 'have' to refresh the page by using a force refresh page each time you change any images. And sometimes you forget and then discover the changes when you restart the browser. Although that seems to be necessary in Opera 9 all the time anyway ! PS : Opera 9 is still my preferred browser, maybe until FireFox 2 ?

One other thing I noticed with Opera is that the animated gifs that have been defined to cycle though the frames in the animation say seven times like the one above start all over again if you page down and then back to the animation. It's a kind of now you see it, now you don't thing that cleans the slate of the animation. Not really always desirable and I feel it counteracts the whole concept of defining how many times an animated gif should loop !

Article written by  John Garner

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

Check out the most recent posts from the blog: 
Sunday, September 24, 2023
The reliability & accuracy of GenAI

I question the reliability and accuracy of Generative AI (GenAI) in enterprise scenarios, particularly when faced with adversarial questions, highlighting that current Large Language Models (LLMs) may be data-rich but lack in reasoning and causality. I would call for a more balanced approach to AI adoption in cases of assisting users, requiring supervision, and the need for better LLM models that can be trusted, learn, and reason.

Read More
Saturday, September 23, 2023
From Chatbots to Reducing Society's Technical Debt

I discuss my experience with chatbots, contrasting older rules-based systems with newer GenAI (General Artificial Intelligence) chatbots. We cannot dismiss the creative capabilities of GenAI-based chatbots, but these systems lack reliability, especially in customer-facing applications, and improvements in the way AI is structured could lead to a "software renaissance," potentially reducing society's technical debt.

Read More
Friday, June 16, 2023
The imbalance of power in the AI game: in search of the common good

The article discusses the contrasting debate on how AI safety is and should be managed, its impact on technical debt, and its societal implications.
It notes the Center for AI Safety's call for a worldwide focus on the risks of AI, and Meredith Whittaker's criticism that such warnings preserve the status quo, strengthening tech giants' dominance. The piece also highlights AI's potential to decrease societal and technical debt by making software production cheaper, simpler, and resulting in far more innovation. It provides examples of cost-effective open-source models that perform well and emphasizes the rapid pace of AI innovation. Last, the article emphasises the need for adaptive legislation to match the pace of AI innovation, empowering suitable government entities for oversight, defining appropriate scopes for legislation and regulation, addressing ethical issues and biases in AI, and promoting public engagement in AI regulatory decisions.

Read More
Thursday, June 1, 2023
Japan revises copyright laws for AI

Japan has made its ruling on the situation between Content creators and Businesses. Japanese companies that use AI have the freedom to use content for training purposes without the burden of copyright laws. This news about the copyright laws in Japan reported over at Technomancers is seen as Businesses: 1 / Content Creators: 0 The […]

Read More
crossmenuarrow-down