286106 - Browser hangs when using javascript to apply display="hidden" CSS attribute to a dom node with multiple dynamically generated children

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[ajones1]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1

When using javascript to generate a large number of child dom nodes dynamically
(I encountered this error using divs, and have not tested it with other node
types) After generating a large number of nodes (15+ in my experience) The
browser would hang if I attempted to apply the CSS attribute display: hidden.



Reproducible: Always

Steps to Reproduce:
1. Use a script to generate a large number of dom nodes in response to user
input, and make each generated node a child of previous nodes.
2. After generating a large number of nodes, attempt to set the hidden CSS
display  attribute on the parent node, or one of the earlier nodes in the tree

Actual Results:  
Firefox hung. I did not wait longer than a minute or two to see if it would come
back out of it.

Expected Results:  
The software should have simply hidden the affected element, and any children of it.

Comment 1

[ajones1]

Attachment: Test case to illustrate the bug

Test case to illustrate this bug. Click the "Click Here" text on each element
to generate a child element. Follow them down until about 15-20 elements have
been spawned, then try to click the original element, which should hide all
children.

Comment 2

[ajones1]

After another test I have determined that the browser does not truly hang, but
took around five minutes to sort out the problem.

Comment 3

[José Jeria]

WFM: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050312
Firefox/1.0+

Tried with 1.0.1, noticed a slight delay (have a fast machine). Not noticable
with trunk build. Can you retest with a trunk build?
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Comment 4

[ajones1]

Tried it with the trunk build. Experienced a noticeable speed improvement, but
there still is a delay. Nesting of 30+ items still produced a 5 minute delay.

Also attempted this with a modified version that separates the show/hide
behavior into another function, and does not nest new elements under existing
elements (all have same initial node as a parent). This newer version had no
speed issues at all, and disappeared immediately.

It looks like the issue here crops up only when the new div elements are nested
inside of previous ones instead of all having the same parent. I am attaching
the file proving this for reference. Please use it to help document that
deep-level nesting is related to the issue.

Comment 5

[ajones1]

Attachment: Proof showing that same amount of nodes w/out deep nesting does not have an issue

Getting 30+ nodes on this document then hiding them does not affect the
performance of the browser when those nodes are not deeply-nested.

Comment 6

[Tristor]

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050405
Firefox/1.0+

WFM, I used the testcase provided, and went through the whole clicking procedure
to create another nest about 200 times, and never had any sort of slow-down,
hang, or crash.  I am going to go ahead and mark this WFM, If anybody disagrees,
or you can reproduce with a recent build (trunk from within last 3 days), re-open.