1281137 - Firefox slow to the point of hanging when rendering nested flexbox layout with overflow-y: scroll

Status: RESOLVED DUPLICATE of bug 1209697

(Core :: Layout, defect)

Description

[Rens]

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

Comment 1

[Rens]

Attachment: screencast chrome.mov

Comment 2

[Rens]

Attachment: screencast firefox 2.mov

I had to reduce video quality to fit file size limits

Comment 3

[Loic]

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.

Comment 4

[:Gijs (he/him)]

(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.)

Comment 5

[Rens]

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

[:Gijs (he/him)]

Dan, am I right this might be up your alley considering the use of flexbox and layout slowness?

Comment 7

[Rens]

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

Comment 8

[Daniel Holbert [:dholbert]]

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.)

Comment 9

[Emilio Cobos Álvarez (:emilio)]

This works fine for me in current nightly, tentatively duping with bug 1209697, please reopen if I'm wrong.