Vue.js(Nuxt.js)でカルーセル作りたい
- カルーセル作りたい！！！って言われたので、素直にvue-carouselを導入した
- しかし、切り替わりのタイミングで、iOSの場合のみ、背景の要素が一瞬ちらつく
よくあるiOSだけでチカチカするアニメーション
- CSSアニメーションとかで、少しリッチな表現を実装するとき、なんかよくわからん要素がチカっと一瞬出てきたり、イージングが効かなかったりする、事がある。
- opacityいじってると起こりがちみたいな話が多い印象がある
古の対処方法
- CSSで対象の要素に
transform: translate3d(0, 0, 0);を追加すると、直る、という方法がある - すでにいろんな人が教えてくれているので、詳しいことはその偉人たちに任せるとするが、この記述するとGPUアクセラレーションが有効になって、要は描画周りの潜在能力を最大限引き出せる、というような話
Vue-carouselでもうまくいった
- プラグインを使用しているので、特定するのに苦戦したが、vue-carouselを使っているときにも似たようなちらつき現象が発生したわけなので、上記の記述をしたら無事解決した
最近はwill-changeを使う
- 最近は
will-changeプロパティを使うことで、事前にアニメーションしまっせ、ということを明示することができ、実際にこれで解決する - 今回の私の事例の場合は、プラグインでラップされており、結局何しているのか調べるのも面倒だったため、
transform:translate3d(0,0,0);で無理やり解決したが、本当はwill-change: transformとかしてあげた方が優しい世界なんだろうなと思う。
結び
- ということで、古の対応方法と最近の対応方法の備忘録でした。
- 「iOSで」という枕詞のバグレポートが上がってきたら脊髄反射でこの対処方法を思いつくようにならねば「CSSできる」とは謳えない。多分。