我有一些简单的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。
它会影响两个后代，而这两个后代恰好是兄弟姐妹。第一个兄弟更新，但第二个没有。第二个元素的子元素也有焦点，并包含< A >标记，该标记在onclick属性中包含上述代码。
在Chrome的“开发人员工具”窗口中，如果我轻推(例如取消勾选&勾选)任何元素的任何属性，第二个兄弟更新为正确的样式。
是否有一种解决方法可以简单地通过编程“推动”WebKit做正确的事情?
当前回答
并不是说这个问题需要另一个答案，而是我发现，在我的特定情况下，仅仅改变一点颜色就会迫使我重新绘制。
//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';
//Change back to black
setTimeout(function() {
elem.style.color = '#000000';
}, 0);
setTimeout被证明是将第二个样式更改移到当前事件循环之外的关键。
其他回答
并不是说这个问题需要另一个答案，而是我发现，在我的特定情况下，仅仅改变一点颜色就会迫使我重新绘制。
//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';
//Change back to black
setTimeout(function() {
elem.style.color = '#000000';
}, 0);
setTimeout被证明是将第二个样式更改移到当前事件循环之外的关键。
我发现@morewry的出色回答解决了我的问题，而且will-change属性已经到达。
CSS将会改变，或者其他后续的规范将是未来的解决方案，很可能。
在我的例子中，will-change: transform的值;单独在Safari 14中有效。
.wont-update {
will-change: transform;
/* for Safari < 9.1 */
transform: translateZ(0);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change https://caniuse.com/will-change
我发现，只是添加一个内容样式的元素强制它重新绘制，这应该是一个不同的值，每次你想要它重新绘制，而不需要在一个伪元素。
.selector {
content: '1'
}
“display/offsetHeight”hack在我的情况下不起作用，至少当它应用于动画元素时。
我有一个下拉菜单，在页面内容上打开/关闭。在菜单关闭后，工件被留在页面内容上(仅在webkit浏览器中)。唯一的方法，“显示/offsetHeight”hack工作是如果我应用到身体，这似乎令人讨厌。
然而，我确实找到了另一个解决方案:
在元素开始动画之前，在元素上添加一个定义“-webkit-backface-visibility: hidden;”的类(我猜你也可以使用内联样式) 动画完成后，删除类(或样式)
这仍然是相当棘手的(它使用CSS3属性强制硬件渲染)，但至少它只影响有问题的元素，并为我在safari和chrome的PC和Mac上工作。
我发现了一些复杂的建议和许多简单的不起作用的建议，但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘，工作得很好:
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';
我将让其他人评论，如果它适用于“块”以外的样式。
谢谢,Vasil !
