我有一些简单的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());  
    });
}

其他回答

我有这个问题的一个数量的div被插入到另一个div的位置:绝对,插入的divs没有位置属性。当我把这个位置:相对,它工作得很好。(真的很难找到问题所在)

在我的例子中,Angular使用ng-repeat插入元素。

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

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

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

谢谢,Vasil !

丹诺顿方案对我不起作用。我有一些非常奇怪的问题,webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。

我偶然发现,我的解决方案是在脚本之后向正文添加一个空的样式元素。

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

这就解决了问题。这有多奇怪?希望这对某些人有所帮助。

我在使用Angular 10时也遇到了同样的问题。我尝试了许多方法,但似乎都不起作用。 对我来说有效的修复是通过JS处理它。我只是从DOM中删除了元素,并使用ngIf再次添加。

HTML:

<div *ngIf="showElement">
  Contents of your element
</div>

JS:

this.showElement = false;
setTimeout(() => {
  this.showElement = true;
}, 10);

我发现@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