僕が遭遇したIE11固有の不具合とその対策


最近大学時代の同期と飲んだらMSに転職したので
現在から過去の案件で産廃IEくたばれと心底思った発生した事象と対策を書いていきます
他にもこんなことあったぜ!って意見ありましたらお待ちしております。

キャッシュ

Windows10のIE11で遭遇した事象
ログイン→ログアウト→別アカウントログイン
したときの挙動が最初のログインアカウントの状態のレスポンスが返ってくる

  • Authorization: Bearerヘッダーが再ログインしても前のBearerトークンが残り続ける
  • APIレスポンスが前回のものが返ってくる

対策

JSのすごい人に助けてもらいました・・・

  • ClearAuthenticationCacheを無効にする
  • リクエストキャッシュしないようにリクエストパラメータ末尾に日付をつける→jQueryでもこの方法で回避しているらしい

これIEのバグですよね?

// ClearAuthenticationCacheを無効にする(リクエスト前に呼んで確実に消す)
document.execCommand && document.execCommand('ClearAuthenticationCache', 'false')
// キャッシュしないようにリクエストパラメータ末尾に日付をつける(もしくはuuid付与などでリクエストurlを一意にする)
req.url += (req.url.indexOf('?') == -1 ? '?' : '&') + '_=' + Date.now()

位置情報

Chromeではnavigator.geolocation.getCurrentPosition
位置情報が取れるのにWindows10のIE11ではPermissionエラーが返ってきていた

対策

windowsの設定で地図情報をオフになっているとIEでは現在位置が取れないためオンにする
IEの設定ではないので気づくのに時間がかかってしまった
Windows10でのみこの設定がコントロールパネルに存在する

参考:Windows10のIE11.5ではGeolocation APIのgetCurrentPositionが初回しか成功しない

videoタグ

windows7のIE11のvideoタグにて正方形の動画が再生されない
(videoタグのサイズという意味でなく、動画自体の縦横サイズが正方形)
windows8.1以降のIE11では再生される

対策

windows7のIE11とwindows8.1のIE11は別物
Windows7のIE11、Windows8.1以降のIE11で互換性がない糞っぷり

参考:video タグで動画が再生されない。Windows 7 IE11 と Windows 8 IE11 は別物

windows7のIE11ではそもそも正方形動画が対応していない
諦めて横長の動画(かつ横幅720px以下)にするしかない

CSS

flexbox周りでIEだけレイアウトが崩れる

対策

flexboxのバグに立ち向かう(flexboxバグまとめ)

愚痴

もはやページ開いたタイミングでお使いのブラウザでは対応していません
→Chromeストアにぶっ飛ばす
くらいやらないとこの流れは変わらないんじゃないかすら思える