Question

http://jsfiddle.net/ES4xG/8/使大多数视网膜设备崩溃。

使用某些-webkit-transform指令时，iOS Safari“容易”耗尽内存并崩溃。这种方法提供了令人印象深刻的图形，但特别是在视网膜显示器上，似乎消耗了大量内存并导致崩溃。

上面的演示显示的文本显示150次，否则将在PC浏览器上正常运行：

夸大了字体大小和元素数量导致崩溃。 -webkit-transform: translate3d(0,0,0)旨在强制GPU加速绘制每个元素。

在实际应用中，我们使用translateX，Y，Z，scale以及其他似乎以相同方式连接到GPU的其他应用。还使用了图像和精灵，但它们没有直接连接到崩溃。

鉴于上述情况：

1）这是iOS Safari崩溃的错误吗？

2）插入Apple Instruments内存监视器，虚拟内存攀升，似乎是崩溃的罪魁祸首。究竟是什么使用这个记忆？

3）是否有其他GPU加速方法不会占用大量内存？

Answer 1

崩溃是因为您的示例中所有硬件加速项的高度为257,025px。在我的测试中，似乎mobile-safari在崩溃之前可以处理大约20,000px的高度。

硬件加速非常棒，但不要因为使用它而滥用它。

要帮助调试它，您需要使用以下键从终端运行Mac上的Safari：

$> export CA_COLOR_OPAQUE=1 
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUE显示哪些元素已加速.CA_LOG_MEMORY_USAGE显示了用于渲染的内存量。

有关详细信息，请查看以下链接：

Answer 2

尝试在要转换的元素的父元素上使用它

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

这样可以更好地转换元素

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Answer 3

Google Chrome在文本上运行-webkit-transform Javascript动画后崩溃了几分钟。我已经同时使用了rotate()和rotateZ()，特别是当动画文本在视图中时，操作系统报告的内存使用率飙升直到 Aw，Snap！发生错误。

在Windows 7 64位下使用Google Chrome 31.0.1650.63，Blink引擎537.36。

在Firefox 25.0.1上测试了相同的动画，它没有显示任何问题。

我甚至认为Tristan Engine（我自己的JS库）有严重的内存泄漏，但检查了Developer＆gt;时间线记忆图表并没有显示任何迹象。

在图片上显示-webkit-transform或空DIV不会显示此错误。

使用简单的CSS2属性（例如left:或top:动画相同的文字不会显示此错误。

已经在Google上提交了错误报告。花了我三个小时来弄清楚什么是错的。

错误报告： https://code.google.com/p/chromium/issues/detail?id=328245&thanks=328245&ts=1386906785

iOS Safari使用“-webkit-transform”耗尽内存

3 个答案: