インターネットエクスプローラに苦しむ若者

お仕事で Internet Explorer 11に苦しめられたので備忘録として。

 

IE11ではSVGelementにclassListは効かない。

以下を参考にして、毎回setAttributeでclass属性をセットするみたいなアプローチにるのですが・・・

【IE11】undefinedになるsvg.classListへの対処方法

https://qiita.com/mtmtkzm/items/4a2614eeebab60ed53f8

 

setAttributeは先に同名の属性が在る場合、常にその属性を破壊してから上書きするので

状態変化が多いSVGだと1〜3個のclassを状況を判断して増やしたり減らしたりするのが

なかなか辛かったですね。

 

突然aタグのアンカーリンクがバグる

aタグにid名を付けて、同じidに飛ばすみたいなのあるじゃないですか。

こんなの。

<a href="#anchor">リンク元</a>
↓
<div id="anchor">リンク先</div>

これが原因がわからないけれどIE11さんでバグりました。

これにページ内スクロールを付与すると、全然目的とは違うところにスクロールされてしまう、とか。

あるいは別ページに飛ばすとその飛んだ場所から上にはスクロール出来なくなったりとか

もう本当に困った。何せ初めての出来事で、インターネットに同じ症状に陥った例が殆ど転がっていない。

 

これの原因を突き止めずに、強引に解決したのが以下のやり方です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div class="isIE11body">
    <main></main>
  </div>
</body>
</html>
_:-ms-lang(x)::-ms-backdrop, .isIE11body {
    overflow: hidden;
}

というような感じで、bodyタグの下を更にdivで囲ってoverflow: hiddenしてやる。

これで何故かページ内アンカーリンクが正常に作動しました。

 

しかし、「別ページのアンカーリンクに飛ばす」のは上だけでは解決出来ません。これが。

そちらも結局原因がわからずに、強引に解決してみました。

function ie11FreeScroll(){
  const agent = window.navigator.userAgent.toLowerCase();
  // IE11の時だけ発動
  if (agent.indexOf('trident/7') !== -1){
    // 先ほどのbodyタグ直下のdivタグのid取得
    const isIE11Body = document.getElementById('cantScroll');
  // アンカーリンクで飛ぶ先のtop座標を取得する
    const target = document.getElementById('anchor');
    const rect = target.getBoundingClientRect();
    const top = rect.top;
  // 時間差で処理する
    setTimeout(()=>{
   // 元々付与しているoverflow:hiddenを削除するためにclass属性を空にする
      isIE11Body.setAttribute('class','');
   // アンカーリンクのところへスクロールする
      window.scrollTo(0,top);
    },100);
  } else {
    return false;
  }
}

なかなか良くわからん処理内容ですが、バグを検証していると

1.アンカーリンクで飛んだ時点ではoverflow:hiddenが無いと、ページトップに移されてしまう

2.飛んだ後にoverflow:hiddenを検証ツールで外してやると自由にページ内を移動できるようになる

ということだけは判明したので、ページ移遷直後ではoverflow:hiddenのclassを保持しておき

当該ページに到着後、ほんの少しタイムラグをsetTimeoutで持たせて

1.bodyタグ直下のdivタグに付いているclass(overflow:hidden)をsetAttributeで空にする

2.目的のアンカーリンクへスクロール(スクロール自体に時間経過を持たせず、一瞬で移動するようにする)

 

ということをやってあげると「見た目」は上手くいきました。依然としてバグったままではありますが・・・。

 

ほら、作った会社もクソって言ってるし、「せーのっ」で対応切りましょうよ・・・。

https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/The-perils-of-using-Internet-Explorer-as-your-default-browser/ba-p/331732