我们在iPhone (3G + 4)上测试了CSS3，发现了一些性能问题。
我们有一个Webapp显示的个人资料照片+额外的信息。
我们有一个盒子(默认情况下我们隐藏了90%的盒子):
border: 1px solid #aaa;
font-size: 11px;
text-shadow: 0 1px 0 rgba(0,0,0,.75);
box-shadow: inset 0 0 40px rgba(255,255,255,.8);
-webkit-box-shadow: inset 0 0 40px rgba(255,255,255,.8);
-moz-box-shadow: inset 0 0 40px rgba(255,255,255,.8);
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
我们有3个图标下面有一个标签:
background: rgba(0,0,0,.5);
padding: 3px;
font-weight: bold;
text-shadow: 0 1px 0 #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
现在，如果我们动画(让它移动到更高的Y位置)这个盒子，动画真的很慢，甚至不流畅。
我们怎么做才能使动画流畅?
p。在iPhone 4S上运行非常好(因为CPU更好)
编辑:我已经做了这个答案假设你与CSS3过渡动画。如果你不是，你可以，你可能会期望提高表现……值得一试。
这里的问题似乎是webkit必须重新绘制两个非常重的框阴影。这似乎不是一个大任务，但如果你一开始就去掉插入的框影，我想你会看到一个令人惊讶的性能跃升。
我在我的android设备(基于Webkit的浏览器)上经历了沼泽滚动，并做了这个测试来确定问题是什么。文本阴影在UI类型设置中是不相关的。梯度也是无关紧要的。当我点击框阴影时，我注意到当我逐像素删除模糊半径时，性能几乎呈线性增长。
例如，6px的半径可能需要80ms来渲染一个大的div，如果我把它降低到3px，渲染时间接近40ms。2px, 20ms左右
所以你可能想要保留框阴影，如果可能的话只使用图像，否则只使用较小的阴影。一旦你达到webkit可以在一秒钟内在低端设备上重新绘制UI至少20次的地步，你可能就没事了。
这似乎是显而易见的。因为没有选择渲染的质量(例如)，你不能真正优化这除了缩小…对于移动设备，你所能做的就是控制效果，并根据自己的限制条件优化美术作品。