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


当前回答

我使用transform: translateZ(0);方法,但在某些情况下是不够的。

我不喜欢添加和删除一个类,所以我试图找到解决这个问题的方法,最后用一个新的黑客,工作得很好:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

其他回答

丹诺顿方案对我不起作用。我有一些非常奇怪的问题,webkit不会画一些元素在所有;输入中的文本直到onblur才更新;并且改变className不会导致重绘。

我偶然发现,我的解决方案是在脚本之后向正文添加一个空的样式元素。

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

这就解决了问题。这有多奇怪?希望这对某些人有所帮助。

我发现,只是添加一个内容样式的元素强制它重新绘制,这应该是一个不同的值,每次你想要它重新绘制,而不需要在一个伪元素。

.selector {
    content: '1'
}

并不是说这个问题需要另一个答案,而是我发现,在我的特定情况下,仅仅改变一点颜色就会迫使我重新绘制。

//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';

//Change back to black
setTimeout(function() {
    elem.style.color = '#000000';
}, 0);

setTimeout被证明是将第二个样式更改移到当前事件循环之外的关键。

我发现了一些复杂的建议和许多简单的不起作用的建议,但Vasil Dinkov对其中一个建议的评论提供了一个简单的解决方案来强制重绘/重绘,工作得很好:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

我将让其他人评论,如果它适用于“块”以外的样式。

谢谢,Vasil !

我发现这个方法在处理过渡时非常有用

$element[0].style.display = 'table'; 
$element[0].offsetWidth; // force reflow
$element.one($.support.transition.end, function () { 
    $element[0].style.display = 'block'; 
});