search
LoginSignup
0

More than 1 year has passed since last update.

posted at

iOS版chromeでCSSのtransitionが動作しない

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0