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が完全に使われなくなったら、こんな事もあったなって懐かしくなるのかもしれない。