Closed Bug 1701484 Opened 4 years ago Closed 3 years ago

HSL color demo spends large time in nested grid reflow, when you drag a slider to adjust a color

Categories

(Core :: Layout: Grid, defect)

Product:
Core
Component:
Layout: Grid
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Project Flags:
Performance Impact low

People

(Reporter: mayankleoboy1, Unassigned)

References

Details

(Keywords: perf:responsiveness)

go to https://codepen.io/thebabydino/pen/RwoOMOZ
Drag the sliders in the demo

ER: Smoothness
AR : Janky updates

https://share.firefox.dev/3rvTeTi

Thanks for the testcase and the profile!

Looks like the testcase has CSS grids ~6 levels deep, and we're spinning our wheels in grid reflow (remeasuring content, etc).

Really, nothing in the testcase seems to change size or position when I drag the slider (other than the slider itself), so I hope that we could optimize away most of the reflowing/remeasuring here.

For archival/posterity, here's a fork of the current demo (just in case the original one happens to change in a way that makes the issue harder to reproduce):
https://codepen.io/dholbert/pen/abpmLzZ

Severity: -- → S3
Component: Layout → Layout: Grid
Whiteboard: [qf:p3:responsiveness]
Depends on: 1591366
Summary: Demo at https://codepen.io/thebabydino/pen/RwoOMOZ spends large time in Reflow → HSL color demo spends large time in nested grid reflow, when you drag a slider to adjust a color

with the layout.css.grid-item-baxis-measurement.enabled pref turned on (default on for Nightly), I can no longer reproduce the jankyness for dragging the slider.

Agree. We can close this bug as resolved.
Thanks!

Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Performance Impact: --- → P3
Keywords: perf:responsiveness
Whiteboard: [qf:p3:responsiveness]
You need to log in before you can comment on or make changes to this bug.