Strange color-transition behavior in chrome

问题

I'm currently working on a multi-themed application and somehow the transition of the css color-attribute does not work as expected. Instead of applying the transition to each element at once, in chrome it's delayed somehow based on the depth of the element.

I've tested the script in

84.0.4124.1 (Official Build) canary (64-bit) (cohort: Clang-64)
81.0.4044.122 (Official Build) (64-bit) (cohort: Stable)

const createSpanWithDepth = depth => {
  let wrapper = document.createElement('div');
  const root = wrapper;

  for (let i = 0; i < depth - 1; i++) {
    const next = document.createElement('div');
    next.appendChild(wrapper);
    wrapper = next;
  }

  const span = document.createElement('span');
  span.innerHTML = 'Depth' + depth; // JSfiddle doesn't support template strings lol

  root.appendChild(span);
  return wrapper;
}

const {
  body
} = document;

for (let i = 0; i < 100; i += 10) {
  body.appendChild(createSpanWithDepth(i));
}


const btn = document.querySelector('button');
btn.addEventListener('click', () => body.classList.toggle('active'))

body * {
  transition: all 0.3s 0s;
}

body.active {
  color: red;
}

<button>Click me</button>

Okay, maybe it's just because somehow currentColor acts differently in chrome - so let's try it with the background:

const createSpanWithDepth = depth => {
  let wrapper = document.createElement('div');
  const root = wrapper;

  for (let i = 0; i < depth - 1; i++) {
    const next = document.createElement('div');
    next.appendChild(wrapper);
    wrapper = next;
  }

  const span = document.createElement('span');
  span.innerHTML = 'Depth' + depth; // JSfiddle doesn't support template strings lol

  root.appendChild(span);
  return wrapper;
}

const {
  body
} = document;

for (let i = 0; i < 100; i += 10) {
  body.appendChild(createSpanWithDepth(i));
}


const btn = document.querySelector('button');
btn.addEventListener('click', () => body.classList.toggle('active'))

body * {
  transition: all 0.3s 0s;
}

body {
  background: white;
}

body.active * {
  color: red;
  background: green;
}

<button>Click me</button>

Apparently it does work with the background property although there's still some kind of delay, in Firefox (75.0 (64-bit)) it does work.

Both browsers in comparison:

Chrome:

Firefox:

(Same code used as above, A JSFiddle can be found here)

Am I missing something or is this a bug in one of the browsers?

Update

It works if I target span elements directly (Although this is not real solution):

body span {
  transition: all 0.3s 0s;
}

This makes me assume that chrome does some kind of sequential transition?!

Update 2

Thanks to @geoff-james - this is more or less a duplicate of CSS transitions: Strange unwanted delay in Webkit browsers (Chrome and Safari) but maybe there are some alternative solutions for it as the original answer is 6 years old...

来源：https://stackoverflow.com/questions/61483591/strange-color-transition-behavior-in-chrome

标签

javascript

css

google-chrome

firefox