CSSアニメ時のSafariチラツキ問題解消


CSSアニメを実行中、なぜか全くアニメーションと関係ない場所のオブジェクトがプルプルする on Safari。
(何コレ?なんで?なんで?誰か理由をおしえてー!)

そういう時にはこちら。

_remove-purupuru.scss
%remove-purupuru {
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

使い方:プルプルしてるオブジェクトを見つけたら、そいつに対してextendするだけ。

styles.scss
#purupuru {
    @extend %remove-purupuru;
}