dan*_*ton 243 css safari webkit google-chrome
我有一些简单的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做正确的事情？
dan*_*ton 304
我发现了一些复杂的建议和许多简单的建议没有用,但Vasil Dinkov对其中一个的评论提供了一个简单的解决方案来强制重绘/重绘工作正常:
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';
如果它适用于"阻止"以外的样式,我会让其他人评论.
谢谢,瓦西里!
mor*_*wry 89
我们最近遇到过这种情况,并发现在CSS中使用translateZ将受影响的元素提升为复合层可以解决问题而无需额外的JavaScript.
.willnotrender {
transform: translateZ(0);
}
由于这些绘画问题主要出现在Webkit/Blink中,并且此修复主要针对Webkit/Blink,因此在某些情况下更为可取.特别是因为接受的答案几乎肯定会引起回流并重新粉刷,而不仅仅是重画.
Webkit和Blink一直致力于渲染性能,这些故障是优化的不幸副作用,旨在减少不必要的流量和涂料. 很可能,CSS将会改变,或者另一个成功的规范将成为未来的解决方案.
还有其他方法可以实现复合层,但这是最常见的.
Ger*_*ben 51
danorton解决方案对我不起作用.我有一些非常奇怪的问题,webkit根本不会绘制一些元素; 输入中的文本直到onblur才更新; 并且更改className不会导致重绘.
我意外地发现,我的解决方案是在脚本之后向主体添加一个空样式元素.
<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...
修好了.这有多奇怪？希望这对某人有帮助.
Eri*_*icG 32
由于显示器+偏移触发器对我不起作用,我在这里找到了一个解决方案:
http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
即
element.style.webkitTransform = 'scale(1)';
Rob*_*phy 23
我遇到了同样的问题.danorton的'切换显示'修复程序在添加到动画的步进功能时对我有效,但我关注性能而且我寻找其他选项.
在我的情况下,没有重新绘制的元素是在一个绝对的位置元素内,当时它没有z指数.在此元素中添加z-index会改变Chrome的行为并重新按照预期发生 - >动画变得平滑.
我怀疑这是灵丹妙药,我认为这取决于为什么 Chrome选择不重绘元素,但我在这个特定的解决方案中发布了它希望有人的帮助.
干杯,罗布
tl; dr >>尝试将z-index添加到元素或其父元素中.
swe*_*eds 16
以下作品.它只需要在纯CSS中设置一次.它比JS功能更可靠.表现似乎不受影响.
@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }
sow*_*012 13
出于某种原因,我无法得到danorton的工作答案,我可以看到它应该做什么,所以我稍微调整了一下:
$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');
它对我有用.
我来到这里是因为我需要在更改其CSS后重绘Chrome中的滚动条.
如果某人有同样的问题,我通过调用此函数解决了它:
//Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}
这种方法不是最好的解决方案,但它可以解决所有问题,隐藏和显示需要重绘的元素可以解决所有问题.
这是我用它的小提琴:http://jsfiddle.net/promatik/wZwJz/18/
我今天偶然发现了这个:Element.js的Element.redraw()
使用:
Element.addMethods({
redraw: function(element){
element = $(element);
var n = document.createTextNode(' ');
element.appendChild(n);
(function(){n.parentNode.removeChild(n)}).defer();
return element;
}
});
但是,有时我注意到你必须直接在有问题的元素上调用redraw().有时重绘父元素不会解决孩子遇到的问题.
关于浏览器呈现元素的方式的好文章:渲染:重绘,重排/重新布局,重新设置