css - @-webkit-keyframes 使用带旋转的-webkit-transform 闪烁

Question

我有以下关键帧:

@-webkit-keyframes spin {  
from {  
    -webkit-transform: rotate(0deg);
}  
to {  
    -webkit-transform: rotate(360deg);  
}}

这里引用的是:

-webkit-animation-name: spin; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;

这本质上只是在模仿旋转的乙烯基。它在桌面浏览器上看起来很完美，但我注意到在 iPhone 上的 Safari 和 Chrome 上右上角有一些闪烁。我尝试了其他一些我发现但没有运气的解决方案。任何帮助都会很棒。

编辑

元素的 CSS:

#vinyl {
    background-image: url(../img/vinyl_vector.png);
    width: 2140px;
    height: 2140px;
    background-size: cover;
    background-position: center center;
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3s;

    position: absolute;
    top: -1700px;
    left: 50%;
    margin-left: -1070px;
    z-index: 1;
    overflow: hidden;
}

Answer 1

我只是通过将背景图像变成#vinyl 的子“img”来解决这个问题。不知道为什么会发生这个问题!