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


当前回答

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

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

其他回答

这个答案是给那些在使用Angular 10的@danorton解决方案中苦苦挣扎的人的。 这个解决方案

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

适用于我只有“buildOptimizer”:false在angular。json文件。 看起来优化器以某种方式破坏了这个。

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

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

出于某种原因,我无法让danorton的答案工作,我可以看到它应该做什么,所以我稍微调整了一下:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

这对我很有效。

我正在开发ionic html5应用程序,在少数屏幕上我有绝对定位元素,当在IOS设备(iPhone 4,5,6,6 +)上向上或向下滚动时,我有重绘错误。

尝试了许多解决方案,没有一个是有效的,只有这个解决了我的问题。

我使用css类。fixrepaint这些绝对位置的元素

.fixRepaint{
    transform: translateZ(0);
}

这已经解决了我的问题,它可能会帮助别人

设置转换CSS的比例(0.9999)显然工作在最新的chrome。

function redraw(node){
     // Adjust the 200 as fastest as you can
     // or, change the setTimeout to requestAnimationFrame as soon as the element
     // is drawn
     setTimeout(() => (node.style.transform = "scale(0.9999)"), 200);
}