moving a div containing a large amount of absolute positioned images inside a div with an overflow:hidden is very slow.




13 years ago
13 years ago


(Reporter: janklopper, Unassigned)


1.8 Branch

Firefox Tracking Flags

(Not tracked)





13 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv: Gecko/20060731 Ubuntu/dapper-security Firefox/
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv: Gecko/20060731 Ubuntu/dapper-security Firefox/

I have a dom tree like so:

--+img(position:absolute,transparent png)
--+img(position:absolute,transparent png)
--+img(position:absolute,transparent png)

If i move the seccond div 2 pixels to the left, depending on the amount im child img elements it takes very long (secconds) te redraw.
Why is this? 

The images do not change location relative to each other, and the containing div only moves inside the top-most div, which should not trigger a reflow of the rest of the page (since it has an overflow:hidden, and thus any child changes would not affect anything outside of it.

While my site has loads, and loads of other javascript, that code is not releant, and the performance problem existed even with a simple setup with just the scrolling code.

Reproducible: Always

Steps to Reproduce:
1.go to the listed url, medium or high quality level
3.scroll any direction

Actual Results:  
The javascript move is slow, very slow.

Expected Results:  
Not redraw the entire scene.
Not redraw the images, just move the collection 3 pixels to the selected direction.

If needed i will make a small test-case. If anyone is interested in this slow rendering, let me know, il help find it.

Comment 1

13 years ago
Here's the minimal version, without most of the unrelated code. (il trim this down as i get time to do so)
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.8 Branch
You need to log in before you can comment on or make changes to this bug.