如何强制重新渲染后的WebKit 3D在Safari

变换我使用CSS 3D转换放大一个div，例如：如何强制重新渲染后的WebKit 3D在Safari

-webkit-transform: scale3d(2,2,1);

在任何WebKit浏览器缩放本身工作正常。但是，在Safari（移动设备或Windows）上使用此功能时，div的内容不会被重新渲染。结果是缩放后内容变得模糊。

只有使用3D变换时才会出现此效果。使用时一切正常

-webkit-transform: scale(2);。

为了利用iPhone/iPad上的硬件加速功能，最好使用3D转换。

是否有人知道如何告诉Safari重新渲染一个新的规模的股利？

来源

2011-01-09 FatCat123

你怎么知道浏览器不是重新渲染DIV的内容？它是否包含图像com – JoshNaro

文本模糊的原因是因为Webkit将文本视为图像，我想这是硬件加速的代价。我假设你正在使用转换或动画关键帧在你的用户界面，否则性能增益可以忽略不计，你应该切换到非3d转换。

您可以：

•添加事件侦听为transitionend然后更换3D转换为标准的变换，如...

element.addEventListener("transitionend", function() { 
    element.style.webkitTransform = 'scale(2,2)' 
},false);

•由于Webkit的把东西为图像，最好从大开始缩小。所以，写你的CSS在你的“最终状态”和其缩小为您的正常状态......

#div { 
    width: 200px; /*double of what you really need*/ 
    height: 200px; /*double of what you really need*/ 
    webkit-transform: scale3d(0.5, 0.5, 1); 
} 

#div:hover { 
    webkit-transform: scale3d(1, 1, 1); 
}

，你会得到一个悬停文字酥脆。我在这里做了一个演示（在iOS上也工作）：

http://duopixel.com/stack/scale.html

来源

2011-01-31 03:46:09 Duopixel

为我工作，虽然在边距和填充这些2x'ed缩放元素有一些非常奇怪的行为。 – matt

我试图做同样的事情。我认为这里发生的事情是Safari只是缩放像素。也就是说，它执行所有“正常”浏览器渲染，然后缩放结果的像素。

示例：将较高质量的图像（例如1000x1000像素）放在小格（200x200像素）中，并将图像设置为100％的宽度和高度。当您将3D转换为5倍缩放比例时，结果将在Safari中变得模糊，而在Chrome中变得更加清晰。使用2D变换，图像在两者中都会显得很清晰。

解决方法是在完成3D之后转换为2D变换。然而，我发现在转换之间进行转换时有一点点延迟，所以这对我来说工作不太好。

来源

2011-05-02 19:21:27 JoshNaro

我发现试图迫使一个div的重绘在Safari的另一个原因（重新计算悬停文本溢出）时，说起来很简单：

selector { 
    /* your rules here */ 
} 
selector:hover { 
    /* your rules here */ 
} 
selector:hover:after { 
    content:""; 
}

我做了悬停的东西，改变填充到可以容纳一些按钮，但是在safari/chorme中，它不会正确重新计算内容，在伪类之后添加：。

请注意，我没有在互联网上找到这个地方，我在摆弄时发现它。

来源

2012-04-08 22:45:15 Rodrigo

我找不到在Safari（桌面v7.0.2和iOS 6.1.3和7.0.6中包含的一个）中放大缩小模糊的修复方法，但我在某个时候做过，注意到我当我将刻度设置为5时，我得到了一个尖锐的png。我不知道为什么，因为我的代码版本在我所做的所有后续更改中都丢失了。所有其他比例因子都很模糊。

由于iPhone和iPad是这个项目的目标设备，我最终放弃了缩放转换和动画图像高度。我感到失望的是，Safari团队决定以这种方式实施转换，使得这些转换在许多情况下都不可行。

来源

2014-03-10 21:57:29 Hoby

嗯...我越来越想扩大谷歌Chrome浏览器53

我到目前为止发现的唯一的解决办法是隐藏图像映射图像（hidpi）同样的问题（或包含图像的div），然后再次显示。可以使用不透明度= 0或可见性=隐藏，但实际上至少在一两帧内不可见。

这，BTW，甚至不是3d变换。只是2D的东西。

来源

2016-10-18 18:26:25 Orwellophile

嗯...我越来越想扩大谷歌地图的图像（hidpi）使用Chrome 53

一种解决方案是隐藏（混浊，能见度）相同的问题几帧图像（或容器包装的图像/影像/不管它是什么）......更好的解决方案，我在SO另一篇文章发现这（对含DIV发布）：

e.style.transform = 'translateZ(0) scale(1.0, 1.0)'

顺便说一句，我的东西只是普通的2d的东西，translateZ虽然似乎有所作为，尽管我从来没有碰过任何3D。

来源

2016-10-18 18:32:04 Orwellophile

如何强制重新渲染后的WebKit 3D在Safari

回答

相关问题