我怎样才能强迫WebKit重绘/重绘来传播样式变化?

我有一些简单的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做正确的事情?

当前回答

这段代码将重新渲染css

 document.body.style.display = 'flex';
 setTimeout(() => (document.body.style.display = ''), 0);

其他回答

我使用transform: translateZ(0);方法，但在某些情况下是不够的。

我不喜欢添加和删除一个类，所以我试图找到解决这个问题的方法，最后用一个新的黑客，工作得很好:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

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

.willnotrender { 
   transform: translateZ(0); 
}

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

Webkit和Blink一直在努力提高渲染性能，而这些小故障是优化的副作用，目的是减少不必要的流程和油漆。CSS将会改变，或者其他后续的规范将是未来的解决方案，很可能。

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

我也有同样的问题。danorton的“切换显示”修复在添加到我的动画的阶跃功能时确实为我工作，但我担心性能，我寻找其他选项。

在我的情况下，没有重绘的元素位于绝对位置元素中，当时它没有z指数。添加一个z-index到这个元素改变了Chrome的行为和重绘发生的预期->动画变得流畅。

我怀疑这是灵丹妙药，我想这取决于为什么Chrome选择不重画元素，但我在这里发布这个具体的解决方案，希望有人帮助。

欢呼, 抢劫

尝试为元素或其父元素添加z-index。

我建议使用一种不那么粗鲁和更正式的方式强制回流:使用forceDOMReflowJS。在您的示例中，您的代码将如下所示。

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;

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

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

推荐文章