みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

CSSアニメーションで画面がちらつく場合は -webkit-backface-visibility: hidden; で解決する場合がある

大体1年前の記事で取り上げたUIをブラッシュアップしている時に気づきました。

kimizuka.hatenablog.com

解決前DEMO

カードをドラッグした時に、テキストが点滅するんです。
本当は制作当初から気になっていたんですが、原因もよくわからないし放置していました。

f:id:kimizuka:20170117181409g:plain
※ CARD UI の部分に注目するとわかりやすいです。



で、今回ブラッシュアップにあたって、ここをなんとかしようと思いまして、いろいろ試したところ、
-webkit-backface-visibility: hidden; で解決することがわかりました。


解決後DEMO

結局原因がわからないのも気持ち悪いので、
原因を切り出そうとtransform、top、leftがCSSアニメーションするモックもつくってみたのですが、
テキストの点滅が再現せず一旦諦めました。


再現を試みたDEMO(再現せず)


※ クリックしたオブジェクトが回転しながら移動します。



引き続き調査してみようと思います。
また、ブラッシュアップした結果は近いうちに公開できたらいいなと思ってます。