308055 - Javascript causes flicker when modifying display properties of elements

Status: VERIFIED INVALID

(Firefox :: General, defect)

Description

[Jake Olefsky]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4

If you have two page elements that you want to visibly toggle via javascript you
need 2 lines of code.  One line turns one element off by setting display="none"
and the second line turns the other element on by setting display="block". 
Previously, this was working fine.  Under 1.5beta (on Mac at the minimum), the
page seems to refresh in between the two lines so that you get a flicker with
either both elements displayed or both elements invisible depending on the order
of your javascript.  See the listed url for an example.

pseudoJScode:

element1.display="none";
**page draw should NOT happen here**
element2.display="block";
**page draw should happen here**

Reproducible: Always

Steps to Reproduce:
1. Visit URL listed
2. Enter some text
3. Click the "Check Spelling" link a few times to see flickr.

Comment 1

[zug_treno]

WFM with Mozilla 1.8b1 but reproducible with SeaMonkey/20050911 and Firefox
1.5b1 when I click on 'Resume Editing' after step 3.

Comment 2

[Brian Ewins]

(In reply to comment #1)
> WFM with Mozilla 1.8b1 but reproducible with SeaMonkey/20050911 and Firefox
> 1.5b1 when I click on 'Resume Editing' after step 3.

I see this flicker as described above in the nightly trunk:
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.9a1) Gecko/20050929
Firefox/1.6a1

However, I believe firefox is working correctly here. There is no reason why
those javascript commands should be treated as a single transaction for
redisplay. Your example forces the page to reflow when the first element is set
to 'display:none'.  The flicker is just the text below the undisplayed elt being
rendered, then rendered again when the second elt is made visible (ironically
this means you code would have less flicker if the reflow + redraw wasn't so fast)

This problem is why suspendRedraw()/unsuspendRedraw() exist in svg. A common
suggestion for getting smoother animation without svg (see eg articled on
http://www.schillmania.com/) is to use absolute positioning to avoid reflow
calculations. Other things that might work for you in this case would be an
invisible strut image, a container div with a fixed height, etc.