如何防止 safari @-webkit-keyframe 动画闪烁

Question

有时候，当执行一个 css 动画时，Safari 会使动画闪烁。我一直在寻找解决方案，但没有找到任何解决方案。

我有以下 html（已缩短，请参阅 jsfiddle 以获得更多乐趣）

<div class="dot"></div>

还有下面的 CSS

.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; }
}

Chrome 和 firefox 都可以完美地执行动画，但 Safari 偶尔会出现问题。我已经尝试了here 和here 提到的所有方法，但它似乎并没有为我解决。

Answer 1

我遇到了同样的问题 - 并且可以在 apache 配置中使用正确的服务器时间来解决它。