我有一些简单的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做正确的事情?
当前回答
我不敢相信在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';
其他回答
出于某种原因，我无法让danorton的答案工作，我可以看到它应该做什么，所以我稍微调整了一下:
$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');
这对我很有效。
由于显示+偏移触发不适合我，我在这里找到了一个解决方案:
http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
i.e.
element.style.webkitTransform = 'scale(1)';
我也有同样的问题。danorton的“切换显示”修复在添加到我的动画的阶跃功能时确实为我工作，但我担心性能，我寻找其他选项。
在我的情况下，没有重绘的元素位于绝对位置元素中，当时它没有z指数。添加一个z-index到这个元素改变了Chrome的行为和重绘发生的预期->动画变得流畅。
我怀疑这是灵丹妙药，我想这取决于为什么Chrome选择不重画元素，但我在这里发布这个具体的解决方案，希望有人帮助。
欢呼, 抢劫
尝试为元素或其父元素添加z-index。
我遇到了一个SVG的问题，当方向在某些情况下发生改变时，它在Chrome for Android上消失了。下面的代码没有重现它，但是我们的设置。
body { font-family: tahoma, sans-serif; font-size: 12px; margin: 10px; } article { display: flex; } aside { flex: 0 1 10px; margin-right: 10px; min-width: 10px; position: relative; } svg { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .backgroundStop1 { stop-color: #5bb79e; } .backgroundStop2 { stop-color: #ddcb3f; } .backgroundStop3 { stop-color: #cf6b19; } <article> <aside> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%"> <defs> <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1"> <stop class="backgroundStop1" offset="0%"></stop> <stop class="backgroundStop2" offset="50%"></stop> <stop class="backgroundStop3" offset="100%"></stop> </linearGradient> </defs> <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect> </svg> </aside> <section> <p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p> <p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p> </section> </article>
经过一天半的摸索，我对这里提供的俗气的解决方案并不满意，我发现这个问题是由于它在绘制新元素时似乎将元素保留在内存中引起的。解决方案是让SVG上的线性梯度的ID是唯一的，即使它在每页只使用一次。
这可以通过许多不同的方式实现，但对于我们的angular应用程序，我们使用lodash uniqueId函数向作用域添加一个变量:
Angular指令(JS):
scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');
HTML的更新:
第5行:<linearGradient ng- atr -id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">
第11行:<rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng- atr -fill="url(#{{indicatorColourPatternId}})" / >
我希望这个答案能让其他人省下一天砸键盘的时间。
这似乎与Safari中不应用jQuery样式有关
在第一个回应中建议的解决方案在这些场景中对我来说工作得很好，即:在进行样式更改后应用并删除一个虚拟类到主体:
$('body').addClass('dummyclass').removeClass('dummyclass');
这将迫使safari重新绘制。
