镀铬中奇怪的颜色转换行为

Question

我目前正在处理一个多主题的应用程序，并且css color-attribute的过渡无法正常工作。在chrome中，它不会立即将过渡应用于每个元素，而是会根据元素的深度而有所延迟。

我已经在中测试了脚本

• 84.0.4124.1（正式版本）金丝雀（64位）（同类群组：Clang-64）
• 81.0.4044.122（正式版本）（64位）（同类群组：稳定）

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>

好的，也许只是因为以某种方式 currentColor在chrome中的行为不同-因此，让我们在背景下进行尝试：

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>

显然，它使用background属性可以工作，尽管仍然存在一些延迟，但是在Firefox（75.0（64位））中，它可以工作。

两种浏览器的比较：

Chrome浏览器：

Firefox：

（与上面使用的代码相同，可以找到here的JSFiddle）

我是否缺少某些东西，或者这是其中一个浏览器中的错误？

更新

如果我直接定位span个元素，它就可以工作（尽管这不是真正的解决方案）：

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

这使我假设chrome进行了某种顺序转换？！

更新2

感谢@geoff-james-这或多或少是CSS transitions: Strange unwanted delay in Webkit browsers (Chrome and Safari)的重复，但由于原始答案已有6年之久，也许还有其他解决方案...