gpt4 book ai didi

html - iOS6 CSS3 3D 转换非常慢

转载 作者:太空宇宙 更新时间:2023-11-04 15:32:20 25 4
gpt4 key购买 nike

编辑:这个问题将在我被允许的两天内获得 500 声望的赏金。如果在此期间得到答复,第一个发布修复程序的作者将尽快获得声誉。

与iOS5.1相比,iOS6似乎严重破坏了CSS3转换的性能。如果您能提供一个修复程序,使以下示例在 iOS6 上的性能恢复到与 iOS5.1 相当的水平,而不失一般性,您就可以获得我来之不易的声誉。该示例在 iOS5.1 上运行良好(在 iPhone 4 和 4S 上)。 iOS Chrome 应用程序是运行此测试的好地方,因为它嵌入了一个 UIWebView。

现在,这些元素似乎正在硬件加速,但 Apple 的低级管道中存在一个会破坏性能的错误。我已经尝试了一些硬件加速的解决方法,似乎在 iOS5.1 上调用 GPU 的任何东西都会导致 iOS6 上的速度大幅下降。

即使您按如下方式修改 animate 函数,该错误仍然存​​在。

function animate(node) {
node.style.webkitAnimation = 'sample 5s infinite';
node.style.webkitPerspective = 1000;
node.style.webkitBackfaceVisibility = 'hidden';
}

请帮助我对抗 iOS6 的暴政并发布我现在严重损坏的应用程序。

<!DOCTYPE html>
<html>
<head>
<title>Animation Playground</title>
<style>
@-webkit-keyframes sample {
0% { -webkit-transform: translate3d(0px, 0px, 0px); }
10% { -webkit-transform: translate3d(0px, 0px, 0px); }
20% { -webkit-transform: translate3d(10px, 0px, 0px); }
40% { -webkit-transform: translate3d(10px, 10px, 0px); }
50% { -webkit-transform: translate3d(10px, 20px, 0px); }
80% { -webkit-transform: translate3d(20px, 20px, 0px); }
100% { -webkit-transform: translate3d(0px, 0px, 0px); }
}
</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>

最佳答案

iOS 6 需要一组不同的 CSS 规则来触发硬件加速。

试试这个:

-webkit-transform: translate(0,0) translateZ(0);



编辑:实际上,我发现 translate3d() 仍然有效,前提是值会在转换过程中发生变化。所以,这有效:

.element.position   {-webkit-transition: left 1s ease; 
-webkit-transform: translate3d(0,0,0)}
.element.position-a {left: 0}
.element.position-b {left:500px}

但这确实有效:

.element.position   {-webkit-transition: all 1s ease}    
.element.position-a {-webkit-transform: translate3d(0,0,0)}
.element.position-b {-webkit-transform: translate3d(500px,0,0)}

关于html - iOS6 CSS3 3D 转换非常慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12573252/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com