Edited at

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

More than 1 year has passed since last update.

最近大学時代の同期と飲んだらMSに転職したので

現在から過去の案件で産廃IEくたばれと心底思った発生した事象と対策を書いていきます:smirk:

他にもこんなことあったぜ!って意見ありましたらお待ちしております。


キャッシュ

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ストアにぶっ飛ばす

くらいやらないとこの流れは変わらないんじゃないかすら思える