如何强制 WebKit 重绘/重绘以传播样式更改？

Question

我有一些简单的 JavaScript 来实现样式更改：

 sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

这适用于最新版本的 FF、Opera 和 IE，但在最新版本的 Chrome 和 Safari 上失败。

它影响两个后代，他们恰好是兄弟姐妹。第一个兄弟更新，但第二个没有。第二个元素的子元素也具有焦点并包含 标记，该标记在 onclick 属性中包含上述代码。

在 Chrome 的“开发者工具”窗口中，如果我轻推（例如取消选中和选中） 任何 元素的 任何 属性，第二个兄弟姐妹将更新为正确的样式。

是否有一种解决方法可以轻松地以编程方式“推动”WebKit 做正确的事情？

原文由 danorton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现了一些复杂的建议和许多不起作用的简单建议，但 Vasil Dinkov 对其中一个的评论提供了一个简单的解决方案来强制重绘/重绘，效果很好：

 sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

如果它适用于“块”以外的样式，我会让其他人评论。

谢谢，瓦西尔！

原文由 danorton 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我们最近遇到了这个问题，并发现使用 CSS 中的 translateZ 将受影响的元素提升到 复合层 即可解决该问题，而无需额外的 JavaScript。

 .willnotrender {
   transform: translateZ(0);
}

由于这些绘画问题主要出现在 Webkit/Blink 中，并且此修复主要针对 Webkit/Blink，因此在某些情况下更可取。特别是因为接受的答案几乎肯定会导致 回流 和重绘， 而 不仅仅是重绘。

Webkit 和 Blink 一直在努力提高渲染性能，这些故障是旨在减少不必要的流量和绘制的优化的不幸副作用。 CSS will-change 或其他后续规范很可能是未来的解决方案。

还有其他方法可以实现复合层，但这是最常见的。

原文由 morewry 发布，翻译遵循 CC BY-SA 3.0 许可协议