每隔一段时间,Chrome都会错误地呈现完全有效的HTML/CSS或根本不呈现.通过DOM检查器深入挖掘通常足以让它实现其方式的错误并正确地重绘,因此可以证明标记是好的.这种情况在我正在进行的项目中经常(并且可预测地)发生,因为我已经将代码放在适当位置以在某些情况下强制重绘.
这适用于大多数浏览器/操作系统组合:
el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'
Run Code Online (Sandbox Code Playgroud)
如在,调整一些未使用的CSS属性,然后询问一些强制重绘的信息,然后取消对该属性的破坏.不幸的是,Chrome for Mac背后的聪明团队似乎找到了一种方法来获得offsetHeight而无需重绘.从而杀死了一个有用的黑客.
到目前为止,我想出的最好的方法是在Chrome/Mac上获得同样的效果:
$(el).css("border", "solid 1px transparent");
setTimeout(function()
{
$(el).css("border", "solid 0px transparent");
}, 1000);
Run Code Online (Sandbox Code Playgroud)
实际上,强制元素跳跃一点,然后冷却一秒钟然后再跳回来.更糟糕的是,如果你将超时时间降低到500毫秒以下(不太明显),它通常不会产生预期的效果,因为浏览器在返回其原始状态之前不会重新绘制.
有人愿意提供适用于Chrome/Mac的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗?
我正在使用CSS 3D转换来缩放div,例如:
-webkit-transform: scale3d(2,2,1);
Run Code Online (Sandbox Code Playgroud)
缩放本身在任何WebKit浏览器中都能正常工作.但是,在Safari(移动设备或Windows)上使用此功能时,不会重新呈现div的内容.结果是缩放后内容变得模糊.
仅在使用3D变换时才会出现此效果.使用时一切正常
-webkit-transform: scale(2);.
为了在iPhone/iPad上利用硬件加速,使用3D转换会很不错.
有人知道怎么告诉Safari用新的比例重新渲染div吗?
我正在使用jQuery滑块来调整包含段落文本的DIV的填充.当我平均增加所有边上的填充时,它应该强制将封闭的段落放在页面中心的一个更窄的列中.
这适用于Firefox,但在Chrome中,段落宽度保持不变(即它们不会随着DIV的填充推入它们而变窄),因此将布局推向右侧.
我在这里重新创建了这个问题:jsfiddle.net/ms3Jd.您可以在Chrome和Firefox中试用它来查看差异.
有关如何强制Chrome刷新所附段落的任何想法?