title: CSS transitions queue up instead of playing simultaneously - only in Safari and Chrome
body: <p>I have a site on which I'm transitioning everything between light and dark mode on the flip of a switch.</p>
  <p>I'm doing this by giving the <code>body</code> tag a <code>color</code> and <code>background-color</code> which change, and everything on the page is styled using <code>* { transition: color 1s, background 1s; }</code>.</p>
  <p>In Firefox, this does <em>exactly</em> what I want. In Chrome and Safari, it has the horrible effect of seemingly queueing up the transitions by... tag name?</p>
  <p>Eg. First the container fades, then text, then italic text, then headers, then code blocks, etc. etc.</p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/lbT5r.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lbT5r.gif" alt="Example gif" /></a></p>
  <p>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.</p>
  <p>Here's a link to <a href="http://overflo.me" rel="nofollow noreferrer">the site</a> if you'd like to try it out in your browser.</p>