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


当前回答

因为每个人似乎都有自己的问题和解决方案,我想我应该添加一些适合我的东西。在Android 4.1与当前的Chrome,试图拖动一个画布在一个div溢出:隐藏,我不能得到重画,除非我添加了一个元素的父div(在那里它不会做任何伤害)。

var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
    parelt.replaceChild(addElt, remElt);
} else {
    parelt.appendChild(addElt);
}

没有屏幕闪烁或真正的更新,并清理自己。没有全局变量或类作用域变量,只有局部变量。在移动Safari/iPad或桌面浏览器上似乎没有任何损害。

其他回答

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

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

i.e.

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

这个答案是给那些在使用Angular 10的@danorton解决方案中苦苦挣扎的人的。 这个解决方案

sel.style.display='none';
sel.offsetHeight;
sel.style.display='';

适用于我只有“buildOptimizer”:false在angular。json文件。 看起来优化器以某种方式破坏了这个。

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

.selector {
    content: '1'
}

我试着回答了更多的问题,但对我没用。 我有麻烦有相同的clientWidth与safari与其他浏览器相比,这段代码解决了这个问题:

var get_safe_value = function(elm,callback){
    var sty = elm.style
    sty.transform = "translateZ(1px)";
    var ret = callback(elm)//you can get here the value you want
    sty.transform = "";
    return ret
}
// for safari to have the good clientWidth
var $fBody = document.body //the element you need to fix
var clientW = get_safe_value($fBody,function(elm){return $fBody.clientWidth})

这真的很奇怪,因为如果我尝试在get_safe_value之后再次获得clientWidth,我用safari获得了一个坏值,getter必须在sty之间。transform = "translateZ(1px)"; 和猪圈。Transform = "";

另一个肯定有效的解决方法是

var $fBody = document.body //the element you need to fix
$fBody.style.display = 'none';
var temp = $.body.offsetHeight;
$fBody.style.display = ""
temp = $.body.offsetHeight;

var clientW = $fBody.clientWidth

问题是你失去了焦点和滚动状态。

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

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

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

欢呼, 抢劫

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