251867 - Text flashing briefly when changing the innerHTML of an element

Status: RESOLVED DUPLICATE of bug 251355

(Core :: DOM: Core & HTML, defect)

Description

[Jonathan Leighton]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-UK; rv:1.7) Gecko/20040616
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-UK; rv:1.7) Gecko/20040616

In the attached testcase, when JavaScript is used to modify the innerHTML of an
element (in this case a <div> with the id "div1"), the inside of the element
sometimes goes blank very shortly (only for maybe 1ms or so) and then the text
appears. When used in conjunction with a setInterval, this can have a bad
effect. In extreme cases this might cause people who suffer from epilepsy problems.

I have tested this in both Opera and MSIE, and both of them do it without the
'flashing' effect.

Reproducible: Sometimes
Steps to Reproduce:
1. View the attached testcase in Mozilla.
2. Watch what happens, and notice how the text 'flashes'.
Actual Results:  
The text 'flashes' when the innerHTML is changed.

Expected Results:  
There should be no 'flashing' when the innerHTML is changed.

Comment 1

[Jonathan Leighton]

Attachment: Testcase for bug 251867

Comment 2

[Michael Krax]

Can confirm this using Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) 
Gecko/20040707 Firefox/0.9.2

I experienced this behavior when constantly reading properties from a video 
player plugin to create a custom status bar. The situation gets worse if you 
try to access the innerHTML property more than twice a second. 

Referring to http://www.developer-x.com/content/innerhtml/ using DOM 
manipulation would be even slower. Is there a workaround? I already tried to 
manipulate some style properties (e.g. hide div, change innerHTML, show div) 
before and after each innerHTML change but without getting better results.

Comment 3

[Gérard Talbot]

I do not see the text flashing in the provided testcase. Mozilla 1.8a3 build
2004080208 under XP Pro SP1a here.

Reporter, in your initial description, you seemed to imply that this behavior
could be seen also when not using setInterval but just innerHTML: is that so?
Could you provide a reduced testcase where this would happen? Or is the problem
only seen when both innerHTML and setInterval are involved, are mixed?

Comment 4

[Jonathan Leighton]

Attachment: Simplified testcase for bug 251867

I have downloaded the latest Mozilla nightly and the bug is still apparent. I
am also using XP Pro SP1. Please note that the flashing doesn't always happen,
and you sometimes have to wait for a short while (10 seconds max) before seeing
it happen.

This is a simplified testcase as requested. It still uses setInterval, and I
didn't mean to imply that the bug happens without using setInterval in my
initial description. The reason that setInterval is neccessary is because there
needs to be some way of repeatedly changing the innerHTML of the element in
order for the flashing to happen. I have also made a testcase that uses
setTimeout instead of setInterval where the bug still happens.

Comment 5

[Jonathan Leighton]

Attachment: Testcase for bug 251867 using setTimeout rather than setInterval

This testcase uses setTimeout in much the same way that setInterval is used.

Comment 6

[Jonathan Leighton]

Attachment: Testcase using an inline element

I have noticed that this bug does not affect inline elements at all, as
demonstrated by this testcase using a <span> element. I have tested it with
other inline elements too and none of them are affected. In this testcase the
<span> is enclosed in a <div> which provides the border.

I would really appreciate it if this bug got some attention as it badly affects
a script that I have written. However, using an inline element enclosed in a
block element would be a workaround I guess.

Comment 7

[Jonathan Leighton]

I no longer experience this bug using Firefox 0.10.

Michael, if you could try it yourself with 0.10 and get the same result, this
bug might be able to be closed.

Comment 8

[Michael Krax]

(In reply to comment #7)
> I no longer experience this bug using Firefox 0.10.
> Michael, if you could try it yourself with 0.10 and get the same result, this
> bug might be able to be closed.

Tried the simplified testcase: 
https://bugzilla.mozilla.org/attachment.cgi?id=155109&action=view

The bug is still there using: 
Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001 Firefox/0.10.1

Text begins to flash after a few seconds, it gets worse as longer the script 
runs, cpu usage increases up to 80%.

Seems it isn't fixed :( I integrated the "inline in a block" workaround you 
mentioned into my scripts and it helps to avoid the bug both in 0.9.2 and in 
0.10.1.

Comment 9

[Boris Zbarsky [:bzbarsky]]

I rather wonder why we're basically ending up painting in the middle of things
here....

Comment 10

[Martijn Wargers (dead)]

This is basically a duplicate of bug 251355, that has been fixed for quite a
while now, so this bug is also fixed.
If someone can still reproduce in a recent build, then please reopen.

*** This bug has been marked as a duplicate of 251355 ***