[CSS] IE11でtransform:scale()がガックガクになる場合の対処法
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
CSSアニメーションになくてはならないtransform系プロパティ。
平素よりお世話になっております。
しかしながらまだまだブラウザ間で挙動の差があるのも事実で、油断のならないプロパティでもあります。
transform:scale()でゆっくりと画像を拡大したらIE11でカックカクだった
よく見かけるゆっくり背景画像が拡大されるようなインタラクション。
しかしこれ、一定の状況下ではIE11だとガクガクしちゃってもう見るに耐えない状況になっちゃうみたいです。
そんな時の対処法。ハックに近い方法ですがとても簡単です。
transform:rotate(0.001deg)を追加してあげるとIE11でもヌルヌル
deg値の小数点以下は大して重要じゃないので0.1とかでも大丈夫です。
transform: scale(1.15) rotate(0.001deg);
こんな感じですね。
animationのkeyframeで指定する場合は、
@keyframes zoom {
0% {
transform: scale(1.15) rotate(0.001deg);
}
100% {
transform: scale(1) rotate(0.001deg);
}
}
こんな感じで開始・終了の値にrotateを差し込んであげましょう。
deg値は同値で問題ないです。
transform系のバグはちょこちょこあるので、こちら↓の記事でもまとめてます。
