我有一些简单的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做正确的事情?
当前回答
这将强制重绘，同时避免闪烁，现有的元素修补和任何布局问题…
function forceRepaint() {
requestAnimationFrame(()=>{
const e=document.createElement('DIV');
e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
pointer-events:none;z-index:9999999';
document.body.appendChild(e);
requestAnimationFrame(()=>e.remove());
});
}
其他回答
“display/offsetHeight”hack在我的情况下不起作用，至少当它应用于动画元素时。
我有一个下拉菜单，在页面内容上打开/关闭。在菜单关闭后，工件被留在页面内容上(仅在webkit浏览器中)。唯一的方法，“显示/offsetHeight”hack工作是如果我应用到身体，这似乎令人讨厌。
然而，我确实找到了另一个解决方案:
在元素开始动画之前，在元素上添加一个定义“-webkit-backface-visibility: hidden;”的类(我猜你也可以使用内联样式) 动画完成后，删除类(或样式)
这仍然是相当棘手的(它使用CSS3属性强制硬件渲染)，但至少它只影响有问题的元素，并为我在safari和chrome的PC和Mac上工作。
丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。
我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
这就解决了问题。这有多奇怪?希望这对某些人有所帮助。
我发现了一些复杂的建议和许多简单的不起作用的建议，但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘，工作得很好:
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';
我将让其他人评论，如果它适用于“块”以外的样式。
谢谢,Vasil !
我在使用Angular 10时也遇到了同样的问题。我尝试了许多方法，但似乎都不起作用。 对我来说有效的修复是通过JS处理它。我只是从DOM中删除了元素，并使用ngIf再次添加。
HTML:
<div *ngIf="showElement">
Contents of your element
</div>
JS:
this.showElement = false;
setTimeout(() => {
this.showElement = true;
}, 10);
我来到这里，因为我需要在修改css后重新绘制Chrome中的滚动条。
如果有人有同样的问题，我通过调用这个函数来解决它:
//Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}
这种方法不是最好的解决方案，但它可能适用于所有情况，隐藏和显示需要重绘的元素可以解决所有问题。
这是我使用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/
