317991 - TBODY scrolling/rendering extremely slow when cells contain overflow-x:hidden content

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Juergen Ebert]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

A TABLE with fixed height and scrollable TBODY scrolls extremely slow when the cells each contain a DIV with "overflow-x" set to "hidden".

Reproducible: Always

Steps to Reproduce:
1.Create a TABLE with fixed height.
2.Create TBODY, TRs and TDs. Each TD contains a DIV.
3.Set the style for the DIV to cut overflowing content (overflow-x:hidden).
4.Open in Firefox and scroll table content.
Actual Results:  
Table scolls extremely slow and gets much slower when more columns are added. The provided testcase with 200 rows scrolls too slow to be useful even on a 3GHz machine.

Expected Results:  
Scrolling should be much faster and should not be that much dependent on row count.

This seems to be caused by the overflow-x in the DIVs and by only the TBODY being scrollable. If one places the table with variable size inside another DIV of fixed height and makes this DIV scrollable than scrolling will be much faster. However this is not an option since the THEAD is supposed to stay in place. Also I would like to skip the DIVs completely but having overflow-x in the TDs does not work at all. We need this for our web applications.

Comment 1

[Juergen Ebert]

Attachment: Testcase

The testcase contains a table with 400 rows.

Comment 2

[Juergen Ebert]

The scrolling TBODY is not a problem. I will upload a testcase without it which is still slow. And I will upload a testcase without overflow-x in the table cells which is fast.
Also this bug being unconfirmed and open for almost a year now is very disappointing.

Comment 3

[Juergen Ebert]

Attachment: Testcase 2, same as Testcase but without scrolling TBODY.

Comment 4

[Juergen Ebert]

Attachment: Testcase 3, same as Testcase 2 but without overflow-x in table cell.

Comment 5

[Martijn Wargers (dead)]

Thanks for the testcase.
I can see the bug with current trunk build, so confirmed.
I think this would be improved/fixed by the patch for bug 352093.

Comment 6

[Juergen Ebert]

Ok, I found the culprit. Switch from overflow-x to overflow and it gets speedy. Now this I never would have guessed.

Comment 7

[Juergen Ebert]

Attachment: Testcase 4, same as Testcase 2 but with overflow instead of overflow-x

Comment 8

[kris dahl]

Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Able to reproduce.  Had this problem with a slow scrolling HTML report generated in Micrsoft Reporting Services.

Remove the overflow-x CSS and report scrolls perfectly, but renders slightly differently.  Change 'overflow-x' CSS to 'overflow', renders identically but scrolls quickly.

I thought overflow-x was IE only?  What is difference between overflow-x and overflow CSS properties?  They seem to render identically.


Bug 358936 is a duplicate of this bug.

Comment 10

[Boris Zbarsky [:bzbarsky]]

Comment 5 is right.  "overflow-x: hidden" implies "overflow-y: auto", which leads to creation of a child widget.  Just using overflow:hidden doesn't create widgets.

Comment 11

[Sander]

This was fixed by bug 352093.