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

Question

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

动画和一般的、动态的样式变化已经持续了很长时间。例如，以下代码 fragment 需要一两秒钟才能显示:

<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，但是当我尝试这样做时，没有任何乐趣......

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

Answer 1

我删除了它，因为它会在小屏幕(智能手机/竖屏)上造成奇怪的行为。父选择器，有

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

导致嵌套元素折叠。我只在小屏幕上发现了这一点，而且我能找到任何合适的解决方案。