相关疑难解决方法(0)

在Chrome/Mac上强制DOM重绘/刷新

每隔一段时间,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的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗?

javascript css macos dom google-chrome

209
推荐指数
8
解决办法
28万
查看次数

如何在Safari中进行WebKit 3D变换后强制重新渲染

我正在使用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吗?

css safari webkit transform scale

26
推荐指数
2
解决办法
2万
查看次数

jQuery CSS渲染 - 适用于Firefox,而不适用于Chrome

我正在使用jQuery滑块来调整包含段落文本的DIV的填充.当我平均增加所有边上的填充时,它应该强制将封闭的段落放在页面中心的一个更窄的列中.

这适用于Firefox,但在Chrome中,段落宽度保持不变(即它们不会随着DIV的填充推入它们而变窄),因此将布局推向右侧.

我在这里重新创建了这个问题:jsfiddle.net/ms3Jd.您可以在Chrome和Firefox中试用它来查看差异.

有关如何强制Chrome刷新所附段落的任何想法?

javascript css jquery webkit google-chrome

10
推荐指数
1
解决办法
7630
查看次数

标签 统计

css ×3

google-chrome ×2

javascript ×2

webkit ×2

dom ×1

jquery ×1

macos ×1

safari ×1

scale ×1

transform ×1