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

RESOLVED DUPLICATE of bug 1209697

Status

()

Core
Layout
--
major
RESOLVED DUPLICATE of bug 1209697
2 years ago
a year ago

People

(Reporter: Rens, Assigned: dholbert, NeedInfo)

Tracking

(Blocks: 1 bug, {perf, testcase})

50 Branch
perf, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
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
(Reporter)

Comment 1

2 years ago
Created attachment 8763831 [details]
screencast chrome.mov
(Reporter)

Comment 2

2 years ago
Created attachment 8763833 [details]
screencast firefox 2.mov

I had to reduce video quality to fit file size limits

Comment 3

2 years ago
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)

Updated

2 years ago
Component: General → Layout
Product: Firefox → Core

Comment 4

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

Updated

2 years ago
(Reporter)

Comment 5

2 years ago
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

2 years ago
Dan, am I right this might be up your alley considering the use of flexbox and layout slowness?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(dholbert)
Keywords: testcase
(Reporter)

Updated

2 years ago
Flags: needinfo?(bugzilla)

Updated

2 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
(Reporter)

Comment 7

2 years ago
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
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
(Reporter)

Updated

2 years ago
Version: 47 Branch → 50 Branch
This works fine for me in current nightly, tentatively duping with bug 1209697, please reopen if I'm wrong.
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1209697
You need to log in before you can comment on or make changes to this bug.