1780102 - Initial JS restyle causes a transition to play in Firefox, but not Chrome

Status: RESOLVED INVALID

(Core :: CSS Transitions and Animations, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

[This bug might be INVALID; just filing this for investigation and as a place to drop testcases for now, for an interop issue that I'm observing.]

STR:

1. Load attached testcase.

FIREFOX RESULTS:
The text appears and slowly fades out; we play a transition for opacity assignment.

CHROME RESULTS:
The text never appears in the first place. The opacity is immediately set to 0, and no transition plays.

I ran into this in the wild at https://2022.internethealthreport.org/facts/ (which currently has a script block right at the start of the body which adds the fade-out class to the body, which in Firefox causes a 0.5s fade-out transition to play right away but in Chrome just makes the page render blank until the class is removed.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (transitioning background-color on body vs. an arbitrary element)

Here's a case where I'm transitioning the background-color instead of opacity, and I've done it on body vs. another element (just a div).

We agree with Chrome on how to handle this for the div -- we instantly jump to the assigned style, without playing the transition. But we do play the transition for the body (just as in testcase 1); i.e. Firefox shows a purple page background here for 10 seconds.

Comment 2

[Daniel Holbert [:dholbert]]

Aha -- if I load the testcase in Chrome with their Network DevTools panel configured to "disable cache: checked" and with the throttling dropdown set to "Slow 3G", then they sometimes play the transition on body just as Firefox does (in testcase 1 and testcase 2).

(I didn't manage to get them to match Firefox on the original in-the-wild https://2022.internethealthreport.org/facts/ page (i.e. I never saw Chrome play a fade-out animation at pageload there) -- but I also didn't try for very long.)

So this interop issue seems to just be a race condition in Chrome, perhaps. (Where they sometimes match us vs. sometimes do something else depending on load ordering.)

I'll call this INVALID since it seems like we're internally consistent at least. :) Though perhaps this merits further investigation if anyone's interested.