我有一些简单的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做正确的事情?
当前回答
我今天偶然发现了这个:Element.redraw() for prototype.js
使用:
Element.addMethods({
redraw: function(element){
element = $(element);
var n = document.createTextNode(' ');
element.appendChild(n);
(function(){n.parentNode.removeChild(n)}).defer();
return element;
}
});
但是，我注意到有时必须直接在有问题的元素上调用redraw()。有时重绘父元素并不能解决子元素正在经历的问题。
关于浏览器渲染元素方式的好文章:渲染:重绘，回流/重布局，重样式
其他回答
我不敢相信在2014年这仍然是一个问题。我在滚动页面时刷新页面左下角的固定位置标题框时就遇到了这个问题，标题会在屏幕上方“鬼影”。在尝试了以上所有的事情都没有成功之后，我注意到很多事情要么很慢/导致问题，因为创建非常短的DOM转播等，导致有点不自然的感觉滚动等…
我最终制作了一个固定的位置，全尺寸的div，带有pointer-events: none，并将danorton的答案应用于该元素，这似乎强制在整个屏幕上重绘，而不干扰DOM。
HTML:
<div id="redraw-fix"></div>
CSS:
div#redraw-fix {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 25;
pointer-events: none;
display: block;
}
JS:
sel = document.getElementById('redraw-fix');
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';
由于显示+偏移触发不适合我，我在这里找到了一个解决方案:
http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
i.e.
element.style.webkitTransform = 'scale(1)';
因为每个人似乎都有自己的问题和解决方案，我想我应该添加一些适合我的东西。在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或桌面浏览器上似乎没有任何损害。
丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。
我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
这就解决了问题。这有多奇怪?希望这对某些人有所帮助。
我们最近遇到了这个问题，并发现使用CSS中的translateZ将受影响的元素提升到复合层可以解决这个问题，而不需要额外的JavaScript。
.willnotrender {
transform: translateZ(0);
}
由于这些绘画问题主要出现在Webkit/Blink中，而此修复主要针对Webkit/Blink，在某些情况下更可取。特别是因为公认的答案几乎肯定会导致回流和重涂，而不仅仅是重涂。
Webkit和Blink一直在努力提高渲染性能，而这些小故障是优化的副作用，目的是减少不必要的流程和油漆。CSS将会改变，或者其他后续的规范将是未来的解决方案，很可能。
还有其他实现复合层的方法，但这是最常见的。
