Question

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

动画和一般的动态风格变化需要很长时间。例如，以下代码片段将花费一两秒钟来显示：

<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)}

导致嵌套元素崩溃。我发现只有在小屏幕上我才能找到合适的解决方案。

CSS3 - Android：translate3d（0,0,0） - 强制硬件加速

1 个答案: