<details> feature detect causes a forced layout of the page
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- frontend, performance
Research direction
Start at src/assets/js/protocol/protocol-supports.js around line 70, then reproduce the warning on the details pattern page in Firefox Nightly with Dev Tools open. Investigate whether calling Mzp.Supports.details() triggers the forced layout before page loading completes. Done means the feature detection no longer causes the reported premature layout, or its invocation is safely deferred if that is necessary.
Written by the indexing model from the issue text.
Description
Description
Calling Mzp.Supports.details() can cause a forced layout of the page in some scenarios. Firefox Nightly gives the following warning when this happens:
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.
Steps to reproduce
- Visit https://protocol.mozilla.org/patterns/molecules/details.html
- Open Dev Tools and inspect the warning message.
The warning links to this line: https://github.com/mozilla/protocol/blob/main/src/assets/js/protocol/protocol-supports.js#L70
Expected result
Is it possible to write a feature detect that doesn't cause the browser to do a forced layout? If not, we should make sure it gets called after the DOMContentLoaded event?
Actual result
The browser is forced to do a layout before it has fully loaded, which probasbly means it then has to do a second layout once finished.
Environment
Firefox Nightly
- Dominant language
- SCSS
- Stars
- 298
- Forks
- 83
- Avg merge
- 8d 2h
- Merged PRs (30d)
- 5
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mozilla/protocol
-
Difficulty 1/5 Under an hour Newbie friendliness 72/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Bug :beetle: Size: XS
Difficulty 2/5 Under an hour Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 45/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 50/100
All issues in mozilla/protocol
Similar issues
-
Browser Waiting for: Product Owner
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
getsentry/sentry-javascript#24577 · 1 comment ·
-
1.0.0-alpha2 Type/Improvement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
wso2/dpdp-accelerator#272 ·
-
light
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
aemdemos/patients-stryker#253 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
clerk/javascript#9852 ·
-
bug good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
amponce/archive-movie-browser#165 ·