fitie.jsが多方面に影響していた話
結論から言うと、もう暫くはちゃんとIEでも動作確認しようね、というお話。
まずは簡単な用語説明から。
aos.jsとは?
スクロールに連動してアニメーションしてくれるプラグイン
実装が超簡単なので私の周囲で人気。slickと相性が悪い
slickとは?
楽にカルーセルとかスライダーとかが実装できるからみんな大好き。aosと相性が悪い
fitie.jsとは?
IEでもobject-fitを使えるようにするスクリプト。このjs読み込むだけだから超簡単
object-fitとは?
CSSのプロパティの1つ。わざわざPhotoShopで写真をトリミングしなくてもCSSでトリミングできる!ただIEだと対応していないのでこれからの活躍に期待
ここまで読んだ勘の良い人なら察してしまったかもしれない。何が起きたのかというと、object-fitでトリミングした画像をslickでカルーセルさせて、aosでスクロールアニメーションをつけたら三つ巴の戦いが始まっていたのだ。表示はガタガタに崩れていた。
自分だと絶対object-fitを使わないので、原因を見つけるのはけっこう苦労した…(´・ω・`)
これの悪いところは、IEだとfitie.jsが走る、という点である。aosとslickは共存させる方法があるから、実はchromeだと全然表示崩れていない。逆にchromeが凄いのかもしれない。
こうして、fitie.jsは影響しまくりまくった。しかもfitie.jsはIEで閲覧していると、object-fit使っていなくても走っているっぽい。object-fit使っていないページでも、見事に表示が崩れていた…。
どうやって解決させたか!
①object-fitを使わず別方法で表示させる
(やり方は色々。最悪背景画像にしちゃう…)
②fitie.jsには退場してもらう
仲良くさせるとか一ミリも考えなかった。ただ早くこの混沌に終止符を打ちたかった。
Web業界にいるともうIEなんてオワコンなんだけれど、クライアントだとまだまだIEは現役で、むしろIEに重点を置いているなんて事もある(ここで時代はもうスマホ優先ですよ!とか言っても納得してもらえないやつ)。だから、まだまだobject-fitは封印しておくしかないんだ…ごめんねobject-fit…。
さいごに
クライアントから指摘される前にやれる事といったら、仕事としてサポート対象にIEが入っているうちは、IEも仲間外れにしないでちゃんと動作確認する。これに尽きる。
もちろん、使いたいプロパティがどのブラウザで使えるか、js同士喧嘩するかしないか把握しておくのも大事だけども。
新しくなったEdgeが認められてIEが完全に使われなくなったら、こんな事もあったなって懐かしくなるのかもしれない。
この記事が気に入ったらサポートをしてみませんか?