Internet Explorer闪烁问题

Question

I'm building a web app that includes a running animation that reproduces the behavior of a non-portable marquee element. I'm using http://jscroller2.markusbordihn.de/ for that effect but the root cause of the problem does not seem directly related to the library itself (it's just the trigger that exposes the problem).

The exact issue is as follows:

I have an html form with several input text fields which the user must fill. The marquee animation is running every X milliseconds (where X is lower than 1 second). Whenever a text field is focused (the user clicks on it with the intent of filling it out), the text cursor does not blink (as it should) and stays permanently in bar form (as a | sign - pardon my language... :-) ).

I have stripped down the offending code to the bare minimum and you can try it out here: http://jsfiddle.net/kyVqk/ .

To test, just press the Start button and then click on text field. A dot should be appended to the label below the input text every time the animation runs and the cursor should not blink (that's the problem). Please note that if the animation runs in time intervals greater than 1 second, this does not happen (you can test this in the previous fiddle) and the cursor blinks as expected. This has led me to believe the problem lies in the way the browser performs the rendering of the text and unfocus/refocus the field during the update process.

This issue is specific to Internet Explorer (at least in version 6), as other major browsers (Firefox and Chrome) do not present this behavior. I've tried updating the label through the DOM's object innerHTML directly but with no success. The exact content that's changed is of no importance either. If the animation only reads properties from the element, the issue does not present itself (only when updating the element's properties - any property).

Since the project I'm working on has high visibility and client exposure, the client is not willing to let that pass. Can anybody shed some light on why this happens? Is there a workaround (attaching/detaching elements from the DOM before/after animation, refocusing after animation, etc.)? Please note that losing the marquee effect is not an option.

Answer 1

I got some flickering probs with IE in the past, don't know if it is the same as yours, but give it a try :

//@cc_on document.execCommand("BackgroundImageCache", false, true);// don't remove : prevent IE6 cursor blinking

Then another fix I remember is to set a fixed background to the body...