Closed Bug 1600163 Opened 5 years ago Closed 5 years ago

html page with lots of nested grid containers is very slow

Categories

(Core :: Layout: Grid, defect)

70 Branch
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 1591366

People

(Reporter: bruno, Unassigned)

Details

(Keywords: perf, testcase)

Attachments

(1 file)

Attached file debug-timeline-tracks-tree.html (deleted) —

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Opening the attached page, waiting for it to render
Also changing the slider on top

Description:
The attached page is a prototype I was building, and while adding features to it, and using more and more css custom properties, all of a sudden it started to render very slowly in Firefox. Commenting code out, I could not get it back to a state where it renders at a reasonable speed.

Actual results:

It took over 4-5 seconds to (re)render on my recent laptop.

Expected results:

It should have rendered instantly

Component: Untriaged → CSS Parsing and Computation
Keywords: perf, testcase
Product: Firefox → Core

Looking at the profiler, all the time is actually spent in grid layout. Seems like nested grids blowing up.

Component: CSS Parsing and Computation → Layout: Grid
Flags: needinfo?(mats)
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: html page with lots of css custom properties is very slow → html page with lots of nested grid containers is very slow

Yeah, this is a known problem. Fwiw, you can work around it by not using content-based row sizes (auto etc).

Status: NEW → RESOLVED
Closed: 5 years ago
Flags: needinfo?(mats)
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: