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


当前回答

对我来说唯一有效的解决方案类似于sowasred2012的答案:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

我在页面上有很多问题块,所以我改变了根元素的显示属性。 我使用display: table;而不是display: none;,因为none将重置滚动偏移量。

其他回答

我们最近遇到了这个问题,并发现使用CSS中的translateZ将受影响的元素提升到复合层可以解决这个问题,而不需要额外的JavaScript。

.willnotrender { 
   transform: translateZ(0); 
}

由于这些绘画问题主要出现在Webkit/Blink中,而此修复主要针对Webkit/Blink,在某些情况下更可取。特别是因为公认的答案几乎肯定会导致回流和重涂,而不仅仅是重涂。

Webkit和Blink一直在努力提高渲染性能,而这些小故障是优化的副作用,目的是减少不必要的流程和油漆。CSS将会改变,或者其他后续的规范将是未来的解决方案,很可能。

还有其他实现复合层的方法,但这是最常见的。

我试着回答了更多的问题,但对我没用。 我有麻烦有相同的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

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

我今天偶然发现了这个:Element.redraw() for prototype.js

使用:

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

但是,我注意到有时必须直接在有问题的元素上调用redraw()。有时重绘父元素并不能解决子元素正在经历的问题。

关于浏览器渲染元素方式的好文章:渲染:重绘,回流/重布局,重样式

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

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

这对JS来说很好

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

但在Jquery中,特别是当你只能使用$(document)时。Ready并且由于任何特定原因不能绑定到对象的.load事件,下面将工作。

您需要获取对象/div的OUTER(MOST)容器,然后将其所有内容删除到一个变量中,然后重新添加它。 它将使所有在外部容器内所做的更改可见。

$(document).ready(function(){
    applyStyling(object);
    var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
    var content = node.html();
    node.html("");
    node.html(content);
}