先日、予想外のところでIE11のバグ（現象？）に出くわしたのでメモしておきます。
svgタグのwidthとheight属性に100%が指定されたSVGをCSSで背景画像に指定すると、IE11だけ配置の指定を無視して中央寄せになってしまうバグです。このバグは背景を指定する領域のアスペクト比がSVGのそれと異なる場合に表面化します（アスペクト比が同じ場合、バグに気づきません）。
バグが発生する条件とデモ
実際の表示はデモページでご覧ください。IE11で見ると一番最初の三日月だけ、中央寄せになってしまっています。
このバグはSVGとCSSで以下のサンプルコードのような指定をすると発生します。
SVG
下の画像のようにサイズが132 x 160pxの三日月のSVGでwidthとheight属性に100%を指定します。
<svg width="100%" height="100%" viewBox="0 0 132 160" version="1.1" ... >CSS
SVGと同じ高さ（160px）で幅（400px）が違う領域にSVG画像を背景として指定します。背景画像は左上に配置されるようにleft topを指定します。
.box-moon {
width: 400px;
height: 160px;
background: #002667 url(../img/sharp-moon-default.svg) no-repeat left top;
}表示の違い
IE11では三日月が指定領域の中央に配置されますが、最新版のChrome、Firefox、Safari、Edgeなど、そのほかのブラウザでは左寄せに配置されます。
対処法
対処法は簡単です。widthとheight属性をpx値で記述すればIE11でも他のブラウザと同様の表示になります。
<svg width="132" height="160" viewBox="0 0 132 160" version="1.1" ... >問題が発生した理由
最近、制作にはAffinity Designerを使ってるんですが、SVGを書き出すとデフォルトではwidthとheight属性に100%が記述されます。そのSVGをそのまま背景画像として使用したため、今回のようなバグに出くわしました。
Affinity Designerでは、SVGを書き出す際に「viewBoxを設定する」というオプションを外せばwidthとheight属性がpx値で記述されますが、その場合viewBoxが記述されなくなります。viewBoxの記述がないと別の問題が発生するので避けたいところです。
ということで、現状、書き出したSVGをテキストエディターで開いてwidthとheight属性の値を修正しています。
Adobe Illustratorでは？
Adobeは契約してないのでIllustratorのSVG書き出しでどのような記述がされるか確認できませんが、IllustratorでもSVGを書き出して使う際は注意した方が良さそうです。
さいごにひとこと
IE11はIE9以前のブラウザと比べるとそこまで悪いブラウザだとは思っていなかったので、今回のバグは意表を突かれた感じでした。対処法がシンプルなのでそこまで大きな問題ではないですが…
今回のケースのように、SVGの書き出しはグラフィックソフトの仕様によっては気付きにくいバグが発生することもあるので注意が必要です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。
コメントを残す