我有一些简单的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做正确的事情?
当前回答
出于某种原因，我无法让danorton的答案工作，我可以看到它应该做什么，所以我稍微调整了一下:
$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');
这对我很有效。
其他回答
我发现了一些复杂的建议和许多简单的不起作用的建议，但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘，工作得很好:
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';
我将让其他人评论，如果它适用于“块”以外的样式。
谢谢,Vasil !
我遇到了一个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}})" / >
我希望这个答案能让其他人省下一天砸键盘的时间。
丹诺顿方案对我不起作用。我有一些非常奇怪的问题，webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。
我偶然发现，我的解决方案是在脚本之后向正文添加一个空的样式元素。
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
这就解决了问题。这有多奇怪?希望这对某些人有所帮助。
这似乎与Safari中不应用jQuery样式有关
在第一个回应中建议的解决方案在这些场景中对我来说工作得很好，即:在进行样式更改后应用并删除一个虚拟类到主体:
$('body').addClass('dummyclass').removeClass('dummyclass');
这将迫使safari重新绘制。
我来到这里，因为我需要在修改css后重新绘制Chrome中的滚动条。
如果有人有同样的问题，我通过调用这个函数来解决它:
//Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}
这种方法不是最好的解决方案，但它可能适用于所有情况，隐藏和显示需要重绘的元素可以解决所有问题。
这是我使用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/
