我怎样才能强迫WebKit重绘/重绘来传播样式变化?

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

当前回答

我正在开发ionic html5应用程序，在少数屏幕上我有绝对定位元素，当在IOS设备(iPhone 4,5,6,6 +)上向上或向下滚动时，我有重绘错误。

尝试了许多解决方案，没有一个是有效的，只有这个解决了我的问题。

我使用css类。fixrepaint这些绝对位置的元素

.fixRepaint{
    transform: translateZ(0);
}

这已经解决了我的问题，它可能会帮助别人

其他回答

我也有同样的问题。danorton的“切换显示”修复在添加到我的动画的阶跃功能时确实为我工作，但我担心性能，我寻找其他选项。

在我的情况下，没有重绘的元素位于绝对位置元素中，当时它没有z指数。添加一个z-index到这个元素改变了Chrome的行为和重绘发生的预期->动画变得流畅。

我怀疑这是灵丹妙药，我想这取决于为什么Chrome选择不重画元素，但我在这里发布这个具体的解决方案，希望有人帮助。

欢呼, 抢劫

尝试为元素或其父元素添加z-index。

我有这个问题的一个数量的div被插入到另一个div的位置:绝对，插入的divs没有位置属性。当我把这个位置:相对，它工作得很好。(真的很难找到问题所在)

在我的例子中，Angular使用ng-repeat插入元素。

我正在开发ionic html5应用程序，在少数屏幕上我有绝对定位元素，当在IOS设备(iPhone 4,5,6,6 +)上向上或向下滚动时，我有重绘错误。

尝试了许多解决方案，没有一个是有效的，只有这个解决了我的问题。

我使用css类。fixrepaint这些绝对位置的元素

.fixRepaint{
    transform: translateZ(0);
}

这已经解决了我的问题，它可能会帮助别人

我来到这里，因为我需要在修改css后重新绘制Chrome中的滚动条。

如果有人有同样的问题，我通过调用这个函数来解决它:

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

这种方法不是最好的解决方案，但它可能适用于所有情况，隐藏和显示需要重绘的元素可以解决所有问题。

这是我使用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/

“display/offsetHeight”hack在我的情况下不起作用，至少当它应用于动画元素时。

我有一个下拉菜单，在页面内容上打开/关闭。在菜单关闭后，工件被留在页面内容上(仅在webkit浏览器中)。唯一的方法，“显示/offsetHeight”hack工作是如果我应用到身体，这似乎令人讨厌。

然而，我确实找到了另一个解决方案:

在元素开始动画之前，在元素上添加一个定义“-webkit-backface-visibility: hidden;”的类(我猜你也可以使用内联样式) 动画完成后，删除类(或样式)

这仍然是相当棘手的(它使用CSS3属性强制硬件渲染)，但至少它只影响有问题的元素，并为我在safari和chrome的PC和Mac上工作。

推荐文章