Closed
Bug 1281137
Opened 8 years ago
Closed 8 years ago
Firefox slow to the point of hanging when rendering nested flexbox layout with overflow-y: scroll
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 1209697
People
(Reporter: bugzilla, Assigned: dholbert)
References
(Blocks 1 open bug, )
Details
(Keywords: perf, testcase)
Attachments
(2 files)
There seems to be a rendering problem in Firefox when dealing with (complex) nested Flexbox layouts. Technical details: We've written a calendar application that displays a user's activities in a certain week. The calendar container, it's child elements and their children are display: flex. For some reason, contrary to Chrome, Edge and Safari, Firefox renders these elements very slowly, resulting in complete browser hangs. Problems occur when: - Moving the mouse over the calendar. This triggers a mousemove event that in turn updates a text block on the page. The calculations in the mousemove handler don't seem to be the problem - the text update seems to trigger a complete reflow of the page. - Changing to the next or previous week in the calendar. This triggers a render of the new week's calendar items, which is very slow again. This is probably due to the calculations that we make to change element sizes. What we found out so far: - The problem only occurs when the calendar content is scrollable, ie. has overflow-y: scroll. Removing the following css rule 'solves' the problem: * { min-height: 0; }, though the content now overflows the page. However, the issue doesn't seem to be related to the min-height specifically; since when we remove the min-height: 0 rule and set the calendar height in a different way (using a combination of overflow rules), the slow rendering returns. Browsers: - Firefox 47 on OS X: problematic - Chrome 51 on OS X: fast rendering - Safari 9 on OS X: fast rendering - Edge 25 on Windows 10: fast rendering
Do you have a reduced testcase showing the slowness? In addition, it's better to attach videos in webm/mp4, because mov is not very user-friendly.
Flags: needinfo?(bugzilla)
Comment 4•8 years ago
|
||
(In reply to Loic from comment #3) > Do you have a reduced testcase showing the slowness? (or a link to the web-app that displays these issues, for that matter... without a testcase it's very hard to do anything useful here.)
Thanks for your replies. I have created a reduced test case showing the problems on resizing the window and mousemove events, see bug report url: http://firefox-debug.s3-eu-west-1.amazonaws.com/index.html
Comment 6•8 years ago
|
||
Dan, am I right this might be up your alley considering the use of flexbox and layout slowness?
Updated•8 years ago
|
Severity: normal → major
Keywords: perf
Summary: Firefox hangs when rendering nested flexbox layout with overflow-y: scroll → Firefox slow to the point of hanging when rendering nested flexbox layout with overflow-y: scroll
Has there been any progress on this? I've just tried the attached test case with the new Firefox 48 release on OS X and it hangs in this release as well
Assignee | ||
Comment 8•8 years ago
|
||
No progress so far, but I'll hopefully take a look at this soon. (This is likely related to bug 1151040 and/or bug 1150123.)
Assignee: nobody → dholbert
Assignee | ||
Updated•8 years ago
|
Blocks: flexbox-perf-issues
Comment 9•8 years ago
|
||
This works fine for me in current nightly, tentatively duping with bug 1209697, please reopen if I'm wrong.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → DUPLICATE
Assignee | ||
Updated•9 months ago
|
Flags: needinfo?(dholbert)
You need to log in
before you can comment on or make changes to this bug.
Description
•