Dynamic changing background-image will cause flicker in IE ( in IE6 ~ IE9 )


  • Hi,

    I was made a jsFiddle page to repro my issue.   Please enter the following page:

    On the right-bottom corner, you can click on the image that will cause a click event to change image.

    If you use any browser other than IE, after image been cached in browser.  Everytime you click on the image will not cause a flicker. 

    I was tested from IE6 to IE9.  There are all become flicker.

    Does anyone know how to workaround this problem?


    Tuesday, June 14, 2011 4:44 PM


  • Tools>Internet Options, Advanced tab, Enable automatic image resizing, in IE9 check "Use software rendering instead of GPU rendering"

    remove the background color as browsers will re-render it also... some users will perceive the transition from black to white (windows background color, the default body background color) as a flicker as the receptors in our eyes are for either color (rods) or intensity (cones)... hence we do not see colors in dim light situations.

    Tuesday, June 14, 2011 11:03 PM