CSS3 - Android: translate3d(0, 0, 0) - 强制硬件加速答案

【问题标题】：CSS3 - Android: translate3d(0, 0, 0) - force hardware accelerationCSS3 - Android: translate3d(0, 0, 0) - 强制硬件加速
【发布时间】：2014-09-17 18:47:56
【问题描述】：

尽管启用了清单中的 hardwareAccelerated 标签，但我最近在为 Android 开发的应用程序上遇到了性能问题。

动画和一般的、动态的风格变化需要很长时间。例如，下面的 sn-p 代码需要一两秒才能显示出来：

<script>
    var elem = popup;
    elem.style.display = 'block';
</script>

<style>
    #popup {
        display: none;
    }
</style>

<div id="popup">1, 2, 3...</div>

然后我发现了一个我以前发现并忘记的技巧：

-webkit-transform: translate3d(0, 0, 0);

这很好用，但我有点困惑这适用于哪个类/元素。

以前，我使用过以下内容：

* {
    -wekbit-transform: translate3d(0, 0, 0);
}

效果很好，但是在页面上，我有一个滚动的 UL，滚动后 UL 无法很好地呈现，所以在谷歌搜索后，我将 * { ... } 更改为 body div { ... }，这似乎更可靠.

所以它引出了一个问题，作为一般规则，-webkit-transform 是否适用于特定的选择器？我以为是动画元素，在本例中为 #popup，但当我尝试这样做时，没有任何乐趣......

我希望这是有道理的。谢谢。

【问题讨论】：

标签： android css css-selectors css-transforms

【解决方案1】：

我删除了它，因为它会在小屏幕（智能手机/肖像）上引起奇怪的行为。父选择器，有

.container > * {-webkit-translate3d(0,0,0)}

导致嵌套元素崩溃。我只在小屏幕上发现了这一点，我可以找到任何不错的解决方案。

【讨论】：