スクロールすると、ロゴのサイズをすっと小さくして邪魔にならないように追尾させる。
そんな処理を書いた時、IEとEdgeで確認したらtransitionが効いてなくて
ロゴが一瞬消えて急にサイズが変わるという挙動になっていました。
.header__logo {
・・・省略・・・
width: 70px;
top: 0;
transition: width0.3s, top0.3s;
transform: rotate(0.0001deg);
&.down {
width: 45px;
top: -10px;
}
}
こんな風に、
- transitionはプロパティごとに指定する
- transform: rotate(0.0001deg);を追加する
これでだいぶマシになりました。でもまだなんか微妙に・・・
backface-visibility:hidden; も効果的だとどこかのサイトで見ましたが、
今回の私のケースでは特に変わりがありませんでした。
