CSS transitions queue up instead of playing simultaneously - only in Safari and Chrome

Question

I have a site on which I'm transitioning everything between light and dark mode on the flip of a switch.

I'm doing this by giving the body tag a color and background-color which change, and everything on the page is styled using * { transition: color 1s, background 1s; } * { transition: color 1s, background 1s; } .

In Firefox, this does exactly what I want. In Chrome and Safari, it has the horrible effect of seemingly queueing up the transitions by... tag name?

Eg. First the container fades, then text, then italic text, then headers, then code blocks, etc. etc.

I haven't the foggiest why this would cause a render engine quirk. Is Firefox right? Is there a spec for this at all? I'm hoping to have the whole page fade at once.

To be clear, the left is Firefox - that's the desired outcome. The right is Safari being very strange, though Chrome is exactly the same.

Here's a link to the site if you'd like to try it out in your browser.

Answer 1

Remove below code:

* {
   transition: color 1s, background 1s
}

and add transition property to the body selector

html, body {
   transition: all 1s;
}