DevTools might flush layout too early, causing transitions once styles load. (was: On DOM ready automatic CSS explode from user-agent defaults to applied styles)
Categories
(DevTools :: Inspector, defect)
Tracking
(Not tracked)
People
(Reporter: ebrahim, Unassigned)
References
Details
Steps to reproduce:
- Disable browser cache from the Network tab of web inspector,
- Open https://lab.laukstein.com/bug/input
Actual results:
The box there expands to its final size
Expected results:
Like Chrome when cache is disabled to not have any initial animation which apparently is fixed in https://crbug.com/332189
This isn't the case only when cache is disabled, it happens when the page is new for me, there can be workaround for like what is described at https://phabricator.wikimedia.org/T376559 but since Chrome has fixed it it would be it would be fixed here also.
|
||
Comment 1•4 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•4 months ago
|
||
I added a nice warning for FOUC which is very helpful at diagnosing this, incidentally:
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.
Pointing to devtools/server/actors/highlighters/utils/markup.js, to this call particularly. That's what causes the initial layout, and subsequently the transition.
Thus this is a DevTools issue, afaict...
|
||
Comment 3•4 months ago
|
||
I was planning to look into the warning message that we now triggering due to the viewport highlighter in the regular console and that is confusing people (Bug 1922190).
Good to know this has other effects on the page so we need to actually fix this (and not simply hide the highlighters warning messages for regular users, which I was thinking as one of the solution)
|
||
Comment 5•4 months ago
|
||
Fixed by Bug 1922190
Description
•