読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

CSS

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

kimizuka.hatenablog.com

解決前DEMO

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

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



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


解決後DEMO

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


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


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



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