Search code examples
csswebkit

@-webkit-keyframes flickering using -webkit-transform with rotate

I have the following keyframe:

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

Which is being referenced here:

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

This is essentially just mimicking a spinning vinyl. It looks perfect on desktop browsers but I've noticed on both Safari and Chrome on iPhone that there is some flickering in the top right hand corner. I've tried some other solutions that I found but with no luck. Any help would be great.

EDIT

CSS for the element:

#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;
}
Solution

  • I just solved this by making the background image into a child "img" of #vinyl. No clue why the issue was happening though!