Bug 281625 – On DOM ready automatic CSS explode from user-agent defaults to applied styles

• Component: DOM
• Status: NEW

[Ebrahim Byagowi]

1. Disable browser cache from the Network tab of web inspector,
2. Open https://lab.laukstein.com/bug/input

What happens:
The box there expands to its final size

What should happen:
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.

[Ebrahim Byagowi]

More practical reproduction of this issue without need of dev console configuration,

1. First open Wikipedia, https://en.wikipedia.org/wiki/ and enable it's dark mode right side pane, (find 'Color (beta)' and click on Dark)
2. Copy this link into your clipboard https://en.wikipedia.org/wiki/Special:Random and paste it to see a random page each

Note how the search box goes from light to dark each time like this https://phabricator.wikimedia.org/F57591888

[Radar WebKit Bug Importer]

<rdar://problem/138509434>

[Ebrahim Byagowi]

This is one annoying Wikipedia's UI polishing issue and now only Safari has it as I filed a bug against Mozilla but turned they only had the issue when inspector is open but they even fixed that https://bugzilla.mozilla.org/show_bug.cgi?id=1925126 but Safari issue isn't dev console exclusive, it just always happen on Wikipedia when a random new page is opened in dark mode. I wish I somehow could help WebKit developers to understand what the issue is.

[alan]

Created attachment 473039 [details]
screen recording

I don't seem to be able to reproduce this :(

[alan]

I can repro the https://lab.laukstein.com/bug/input bug though (on new loads and/or private tabs).

[alan]

https://chromium-review.googlesource.com/c/chromium/src/+/2871469 looks to be about DOM/load even delay.

[Ebrahim Byagowi]

> I don't seem to be able to reproduce this :(

Understandable, it happens for me most of the times and there might be some internet bandwidth difference factor also playing rule here maybe, it looks like this for me,

https://phabricator.wikimedia.org/F57643333

But the good part is disabling cache from the inspector can make this to just always happen even in local instance of MediaWiki only by a simple refresh but this is from Wikipedia,

https://phabricator.wikimedia.org/F57643344

This problem has become an issue in Wikimedia https://phabricator.wikimedia.org/T376559 as I was first asked about an animation I added to not get started before any user interaction with the page and I have a solution but making it to happen cross libraries became a trouble where turned out this is a Safari only issue.

> I can repro the https://lab.laukstein.com/bug/input bug though (on new loads and/or private tabs).

Fixing that alone would be a great start I believe.

[Karl Dubost]

https://searchfox.org/wubkat/rev/d45649fa32a499702c30474e94bd6843c4c67849/Source/WebCore/dom/Document.cpp#7474-7485

[Karl Dubost]

Also https://wpt.fyi/results/css/css-transitions/no-transition-from-ua-to-blocking-stylesheet.html