我怎样才能强迫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做正确的事情?

当前回答

我想补充的是，现在需要在父节点上设置样式。

 sel.parentNode.style.display = 'none';
 sel.parentNode.offsetHeight;
 sel.parentNode.style.display = '';

在当前版本的Safari(15.6)中，这是唯一适用于我的解决方案。

其他回答

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

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

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

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

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

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

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

HTML:

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

JS:

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

我发现，只是添加一个内容样式的元素强制它重新绘制，这应该是一个不同的值，每次你想要它重新绘制，而不需要在一个伪元素。

.selector {
    content: '1'
}

工作如下。在纯CSS中只需要设置一次。而且它比JS函数更可靠。性能似乎不受影响。

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }

推荐文章