最近大学時代の同期と飲んだら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ストアにぶっ飛ばす
くらいやらないとこの流れは変わらないんじゃないかすら思える