iOS6 UIWebView 组件的滚动性能很差，但在 iOS5 中滚动非常流畅。所以我在网上搜索了一下，发现了这个（iOS6 beta 更新日志的一部分）。
WebKit 不再总是使用 -webkit-transform:preserve-3d 选项为元素创建硬件加速层。作者应该停止使用此选项来获得硬件加速。
这可能是原因，因为我的应用显示的 html 网站使用了大量的 css3 转换.. 请任何人提供解决方案或建议如何强制 webview 切换回加速渲染模型？
【问题讨论】：
标签： ios css ios6 hardware-acceleration
尝试替换-webkit-transform: translate3d(0,0,0);的所有实例
有
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
它确实对我有用
【讨论】：
除了已经提到的（或不）触发硬件加速的 CSS 属性的变化之外，我注意到 iOS6 上的另一个变化在 iOS5 上并没有那么严重（或者至少我之前没有真正注意到它） ： 硬件加速元素和非加速元素之间的重叠会减慢渲染速度和应用程序的速度。
如果加速元素和非加速元素之间有任何重叠，请确保将硬件加速添加到那些其他元素，即使它们没有动画等，因为它们也会被重新渲染，这将完全抑制或者在某些情况下恢复加速效果。
如果您想查看它，我还写了一篇关于此的简短文章： http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
【讨论】：
只是让一些人知道，如果与硬件加速转换（如 translateZ(0)）一起使用，-webkit-transform-origin 以前是硬件加速的，但现在不再是。
【讨论】：
我附上了一个简单的测试用例，它在 iOS6 中重现了这个错误，并且在 iOS5.1 上运行得非常好（在 iPhone 4 和 4S 上）。 iOS Chrome 应用程序是运行此测试的好地方，因为它嵌入了 UIWebView。我有一个视频，一旦它上传两个 iPhone 4（运行 iOS 5.1，另一个运行 iOS 6）在 PhoneGap 2.0 UIWebView 中运行此示例脚本，我将附上该视频。
目前，这些元素似乎正在被硬件加速，但 Apple 的低级管道中存在一个会降低性能的错误。我们已经尝试了许多硬件加速的变通方法，而且似乎任何在 iOS5.1 上调用 GPU 的东西都会导致 iOS6 的速度大幅下降。
我很想找到一个修复方法，因为我们正在构建的应用在很大程度上依赖于它的正常工作。如果有人能指出这个例子中的错误，那也将不胜感激。
编辑：即使您如下修改 animate 函数，该错误仍然存在。
function animate(node) {
node.style.webkitAnimation = 'sample 5s infinite';
node.style.webkitPerspective = 1000;
node.style.webkitBackfaceVisibility = 'hidden';
}
这似乎强化了调用 GPU 会导致这种减速。
编辑 2：在http://bvgam.es/apple/ 托管的另一个示例在 iOS 5.1 上运行流畅，在 iOS 6 上获得 1-2 FPS。
<!DOCTYPE html>
<html>
<head>
<title>Animation Playground</title>
<style>
@-webkit-keyframes sample {
0% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
10% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; }
20% { -webkit-transform: translate3d(10px, 0px, 0px); opacity: 1; }
40% { -webkit-transform: translate3d(10px, 10px, 0px); opacity: 0; }
50% { -webkit-transform: translate3d(10px, 20px, 0px); opacity: 1; }
80% { -webkit-transform: translate3d(20px, 20px, 0px); opacity: 0; }
100% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
}
</style>
<script type="text/javascript">
function fib(node, a, b) {
node.innerHTML = a;
setTimeout(function() {
fib(node, a + b, b);
}, 0);
}
function animate(node) {
node.style.webkitAnimation = 'sample 5s infinite';
}
function createNode(row, column) {
var node = document.createElement('div');
node.style.width = '7px';
node.style.height = '7px';
node.style.position = 'absolute';
node.style.top = 30 + (row * 9) + 'px';
node.style.left = (column * 9) + 'px';
node.style.background = 'green';
return node;
}
function run() {
for (var row = 0; row < 20; ++row) {
for (var column = 0; column < 20; ++column) {
var node = createNode(row, column);
document.body.appendChild(node);
animate(node);
}
}
var output = document.getElementById('output');
fib(output, 0, 1);
}
</script>
</head>
<body onload="run()">
<div id="output" style="font-size: 40px; position: absolute; left: 220px;"></div>
</body>
</html>
【讨论】：
那些报告 -webkit-transform: translate3d(0,0,0);在 iOS 6 中速度较慢，请提供一些显示此内容的示例内容的 URL。
【讨论】：
尝试将所有-webkit-transform: translate3d(0,0,0); 实例替换为-webkit-perspective: 1000; -webkit-backface-visibility: hidden;。这对我有用。 -webkit-transform: translate3d(0,0,0); 似乎不再调用硬件加速。
【讨论】：
CSS 转换在 iOS 6 中确实慢了很多，至少在我在 iPhone 4 上的应用程序中是这样。
我将基本 translate() 设置为 element，而不是 translate3d()，并且性能保持不变，所以我认为即使 translate3d() 不再触发 GPU 加速。这听起来像是一个错误。
作为一种解决方法，我尝试在元素上设置不同的 CSS 属性（如 rotate3d()、scale3d()、透视等），但它们似乎都没有触发硬件加速。
【讨论】：
如果您使用 3D 变换（例如-webkit-transform: translateZ(0)），UIWebView 仍会进行硬件加速。如果您仅使用-webkit-transform-style: preserve-3d，它就不再适用了。
如果您有一个示例正在执行 3D 变换，但在 iOS 6 中变慢了，您应该在Apple's Bug Reporter 报告它。
【讨论】：