Safari 上的复杂动画导致性能低下

Question

所以在网上漫游之后，我决定在这里问这个问题。

我正在为我们公司构建一个 Ionic 应用程序，其中一个需求是应用此动画：

这是 CSS 部分：

.background{
    background-color:#292930;
}
ul{
    list-style:none;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}
.categories ul li div{
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transition:1s;
    transition:1s;
    position: absolute;
    display:block;
}
.moveTop {
   top:5px !important;
    left:77% !important;
}
.categories ul li:nth-child(1) div{left:3%; top:0;}
.categories ul li:nth-child(2) div{left:40%; top:0;}
.categories ul li:nth-child(3) div{left:77%; top:0;}
.categories ul li:nth-child(4) div{left:3%; top:31%;}
.categories ul li:nth-child(5) div{left:40%; top:31%;}
.categories ul li:nth-child(6) div{left:77%; top:31%;}
.categories ul li:nth-child(7) div{left:3%; top:63%;}
.categories ul li:nth-child(8) div{left:40%; top:63%;}
.categories ul li:nth-child(9) div{left:77%; top:63%;}

基本可以，但是在iOS或者Safari浏览器上超级卡顿，你甚至可以打开fiddle来验证

经过深入研究，我发现您可以添加

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

这应该强制 GPU 硬件加速，但这没有帮助。

之后，我阅读了 Paul Irish 的一篇文章，建议使用 transform:translate 而不是 top、left 属性。

所以我试过了，它确实有效，非常顺利，问题是，对于翻译我需要指定每个元素，与自身相比应该移动多少（比如向左 30px），当我必须支持多种屏幕尺寸时，这是非常无益的。

关于如何使用 translate3d 或 translate 执行此操作，或者只是为了使其在 Safari 上流畅，有什么建议吗？

Answer 1

问题是转换宽度与元素大小有关，这不是响应式的。

一个可能的解决方案是使用 li 元素（在您的布局中大部分未使用）来处理此问题。

我们可以将它们的大小设置为容器的 33%（水平和垂直）。现在所需的变换或多或少（你可以微调）容器大小的 1/3 为 100%，2/3 为 200%

悬停演示以查看转换

.background{
    background-color:#292930;
}
ul{
    list-style:none;
    height: 100%;
    position: relative;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}

li {
    width: 33%;
    height: 33%;
    top: 5px;
    left: 66%;
    position: absolute;
    transition:1s;
}

.categories ul li div{
    left: 5%;
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    display:block;
}

.categories ul li:nth-child(1) {transform: translate(-200%); z-index: 10;}
.categories ul li:nth-child(2) {transform: translate(-100%);}
.categories ul li:nth-child(3) {transform: translate(0%);}
.categories ul li:nth-child(4) {transform: translate(-200%, 100%);}
.categories ul li:nth-child(5) {transform: translate(-100%, 100%);}
.categories ul li:nth-child(6) {transform: translate(   0%, 100%);}
.categories ul li:nth-child(7) {transform: translate(-200%, 200%);}
.categories ul li:nth-child(8) {transform: translate(-100%, 200%);}
.categories ul li:nth-child(9) {transform: translate(   0%, 200%);}

.categories:hover ul li {transform: translate(0%, 0%) !important;}

<div class="background categories">
    <ul>
        <li><div class="elem">1</div></li>
        <li><div class="elem">2</div></li>
        <li><div class="elem">3</div></li>
        <li><div class="elem">4</div></li>
        <li><div class="elem">5</div></li>
        <li><div class="elem">6</div></li>
        <li><div class="elem">7</div></li>
        <li><div class="elem">8</div></li>
        <li><div class="elem">9</div></li>
    </ul>
</div>

Safari 上的复杂动画导致性能低下

Complex Animation on Safari causes sluggish performance

css

ionic