CSSで何気にtransitionを使ってたら詰んでしまったのでメモ。

#1.現象
・iOS版ChromeでCSS transition(opacityとtransform)が機能せず、がたついてしまう
→アプリを再起動するとうまくいくが、しばらくするとなぜかうまくいかなくなる。

・自分のサイトだけおかしいのかと思い、別サイト(例えば https://kenwheeler.github.io/slick/ とか)を開いてみたが、同様にがたつくので、やばいのでは？？と思い始める

・GPU起動させる、will-changeをつける、ベンダープレフィックスを頑張る、などなど色々やったが何も解決に繋がらない。

・PC版Chromeやその他のブラウザでは再現されない。

#2.背景
　おそらくはバグ
　「いったんタブを切り替えて、そこから元のページに戻ると、transitionのさいのfpsが落ちる」という現象が確認されている模様。
　参考にした開発側のスレッド → https://bugs.chromium.org/p/chromium/issues/detail?id=899130

　今後のアップデートで治るのを期待します。

#3.対策
　iOS版ChromeだけJavaScriptの処理で弾くことにしました。
　たとえばこれを参照 → https://qiita.com/tatunori4210/items/11a05bf54984d36732ae