今やWebサイトを作る際に、CSS Transitionでアニメーションをつけるのが定番となっていますが、Safariでは度々ちらつき問題に遭遇します。
実際に遭遇された方でないと想像しづらいかもしれませんが、文字が細くなる または 薄くなる、戻るといった具合で、ちかちかっとするような感じです。
以下2つのパターンで大体対応できたので、紹介します。
CSS Transformsとの組み合わせでちらつく場合
概ね、以下を指定することで解決しました。
-webkit-backface-visibility:hidden;
backface-visibility:hidden;参考にしたサイトではその他いくつか対処法が書いてあります。
参考：「CSS Transformsで画面がちらつくときの対処法 – ゆめいろデザイン」
opacityとの組み合わせでちらつく場合
以下で一発解決しました。
html{
-webkit-font-smoothing: antialiased;
}アンチエイリアス処理をデフォルトに戻す場合は、bodyに対して以下のように指定すればOK
body{
-webkit-font-smoothing: subpixel-antialiased;
}
参考：「font-smoothingでOSXでのフォントのレンダリング方法を調整する」
参考：「Safariでopacityの操作をすると描画がチラつく件 – thamamurの日記」