Help us understand the problem. What is going on with this article?

[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についてはもう少し勉強しようと思った。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away