At times, Safari may experience flickering during the execution of a CSS animation. Despite extensive research and attempts to find a solution, the issue persists.
The HTML code snippet is as follows (refer to jsfiddle for more details)
<div class="dot"></div>
Here is the accompanying CSS code:
.dot {
width: 8px;
height: 8px;
background-color: #1A3853;
border-radius: 50%;
z-index: 1;
margin: 20px;
position: relative;
float: left;
}
.dot:after {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -4px;
width: 8px;
height: 8px;
background-color: #237CC6;
border-radius: 50%;
opacity: .7;
z-index: -1;
animation-name: fading;
animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-animation-name: fading;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes fading {
from { height: 8px; width: 8px; margin-left: -4px; top: 0; opacity: .7; }
99% { height: 26px; width: 26px; margin-left: -13px; top: -9px; opacity: 0; }
to { }
}
@keyframes fading {
from { height: 8px; width: 8px; margin-left: -4px; top: 0; opacity: .7; }
to { height: 26px; width: 26px; margin-left: -13px; top: -9px; opacity: 0; }
}
While Chrome and Firefox smoothly execute the animation, Safari encounters sporadic issues. Various solutions suggested in posts like here and here have been attempted without success.