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


当前回答

这将强制重绘,同时避免闪烁,现有的元素修补和任何布局问题…

function forceRepaint() {
    requestAnimationFrame(()=>{
      const e=document.createElement('DIV');
      e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
               pointer-events:none;z-index:9999999';
      document.body.appendChild(e);
      requestAnimationFrame(()=>e.remove());  
    });
}

其他回答

由于显示+偏移触发不适合我,我在这里找到了一个解决方案:

http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

i.e.

element.style.webkitTransform = 'scale(1)';

这段代码将重新渲染css

 document.body.style.display = 'flex';
 setTimeout(() => (document.body.style.display = ''), 0);

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

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

这将强制重绘,同时避免闪烁,现有的元素修补和任何布局问题…

function forceRepaint() {
    requestAnimationFrame(()=>{
      const e=document.createElement('DIV');
      e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
               pointer-events:none;z-index:9999999';
      document.body.appendChild(e);
      requestAnimationFrame(()=>e.remove());  
    });
}

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

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

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

.fixRepaint{
    transform: translateZ(0);
}

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