October 26, 2017

Safari transitionちらつき問題

今や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の日記」

« WordPressの受託案件でお世話になっているプラグイン | Home | 出産・育児休業に関するお知らせ »