我有一些简单的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的比例(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);
}
其他回答
我在使用Angular 10时也遇到了同样的问题。我尝试了许多方法，但似乎都不起作用。 对我来说有效的修复是通过JS处理它。我只是从DOM中删除了元素，并使用ngIf再次添加。
HTML:
<div *ngIf="showElement">
Contents of your element
</div>
JS:
this.showElement = false;
setTimeout(() => {
this.showElement = true;
}, 10);
工作如下。在纯CSS中只需要设置一次。而且它比JS函数更可靠。性能似乎不受影响。
@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }
因为每个人似乎都有自己的问题和解决方案，我想我应该添加一些适合我的东西。在Android 4.1与当前的Chrome，试图拖动一个画布在一个div溢出:隐藏，我不能得到重画，除非我添加了一个元素的父div(在那里它不会做任何伤害)。
var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
parelt.replaceChild(addElt, remElt);
} else {
parelt.appendChild(addElt);
}
没有屏幕闪烁或真正的更新，并清理自己。没有全局变量或类作用域变量，只有局部变量。在移动Safari/iPad或桌面浏览器上似乎没有任何损害。
我发现，只是添加一个内容样式的元素强制它重新绘制，这应该是一个不同的值，每次你想要它重新绘制，而不需要在一个伪元素。
.selector {
content: '1'
}
我建议使用一种不那么粗鲁和更正式的方式强制回流:使用forceDOMReflowJS。在您的示例中，您的代码将如下所示。
sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;
