chrome 中奇怪的颜色过渡行为

2024-03-30

我目前正在开发一个多主题应用程序以及 css 的过渡color- 属性未按预期工作。在 Chrome 中，它不是立即将过渡应用于每个元素，而是根据元素的深度以某种方式延迟。

我已经测试过该脚本

84.0.4124.1（官方版本）canary（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>

好吧，也许只是因为somehow 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:

（与上面使用的代码相同，可以找到一个JSFiddlehere https://jsfiddle.net/Simonwep/ufzj40ps/9/)

我是否遗漏了某些内容，或者这是其中一种浏览器中的错误？

Update

如果我瞄准它就会起作用span直接元素（尽管这不是真正的解决方案）：

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

这让我假设 chrome 会进行某种顺序转换？！

Update 2

谢谢@杰夫-詹姆斯 https://stackoverflow.com/users/6240567/geoff-james- 这或多或少是重复的CSS 转换：Webkit 浏览器（Chrome 和 Safari）中出现奇怪的不必要的延迟 https://stackoverflow.com/questions/22069877/css-transitions-strange-unwanted-delay-in-webkit-browsers-chrome-and-safari但也许有一些替代解决方案，因为原来的答案已经有 6 岁了......

None

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

Googlechrome

firefox