[CSS/HTML]IE11でmainタグの背景画像(SVG)が表示されない＆切れてしまう[IEバグ]

コーディングしててたまにはIEでも見てみたら、
サイト全体の背景画像が表示されてなくて衝撃が走ったのでまとめとく。

#参考サイト
IE11におけるmain要素の扱い - Qiita
IE11で背景に指定したSVGが正しく表示されない件 - Qiita

#IEだと背景が表示されない
もちろんChrome、Firefox、Safariでは表示が確認できた。
だがIEだけ真っ白な状態、、

もとの　HTMLとCSSはこちら。

HTML

<main class="l-main">
  <!--------- 省略 --------->
</main>

SCSS

.l-main{
  background-color: rgba($gray,0.25);
  background-image:
    url("../img/main-bg-tubu-shiro.svg"),
    url("../img/main-bg-tubu-dot.svg"),
    url("../img/main-bg-tubu-sankaku.svg");
  background-size: 300px;
  // ※背景画像の部分だけ抜粋
}

##IEではmainタグが未サポートであることが原因

未サポートとかあるのか。

対策としてはとても簡単だった。

main要素に「display: block」を付与する。
IE11におけるmain要素の扱い - Qiita

これでブロック要素として扱ってくれるらしい。

SCSS

.l-main{
  display: block; // ←ここを追加！！
  background-color: rgba($gray,0.25);
  background-image:
    url("../img/main-bg-tubu-shiro.svg"),
    url("../img/main-bg-tubu-dot.svg"),
    url("../img/main-bg-tubu-sankaku.svg");
  background-size: 300px;
  // ※背景画像の部分だけ抜粋
}

これで表示されて解決、、、と思ったら、
表示はされるけど、画面全体に出したいのに途切れて表示されてしまってた、、、

#IEだとSVGの背景画像が切れる

表示はされてるが、空白~画像~空白~、、、のような感じ切れまくっていた。
調べてるとSVGであることが原因だとわかった。

##Illustratorで書き出したSVGをそのまま使ったのが原因

対策はこれも簡単。

・SVGタグにwidth,heightを追記
・SVGタグに「preserveAspectRatio=”xMinYMid”」を追記
IE11で背景に指定したSVGが正しく表示されない件 - Qiita

SVG

<svg width="300px" height="300px" preserveAspectRatio="xMinYMid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!--------- 省略 --------->
</svg>

他のブラウザと同じように表示された！！！
やったー！

#まとめ
IEで背景画像出てなくて焦ったけど、対策はあって簡単だったから良かった。
SVGについてはもう少し勉強しようと思った。