IE11でsvgを含むページを印刷しようとするとクラッシュすることがあります。
※IEでsvgがクラッシュする条件は多々あります。
改ページ付近でsvgでスプライトしていたりすると、あるページでは大丈夫なのにあるページではクラッシュする
(mshtml.dll
でエラーコード 0xc0000005
(アクセスバイオレーション)で落ちている)
ぐぐると
@media print{
svg {
display: none !important
}
}
なんてカッコイイ解決かIEのバグだね、という情報くらいしか出てこないですが
svg {
overflow: hidden;
}
としてあげると直るかもしれません。
発生条件と推察
自分が確認した限りは下記の現象が起こりました。
- 同じSVGを使用していてもクラッシュしないページがある
- A4印刷でクラッシュしていても、A3印刷だったらクラッシュしないことがある
- SVGのコンテンツをブロック上部に持っていけばクラッシュしないことがある
- SVGより上部にいるDOMを削除するとクラッシュしないことがある
- SVG要素自体を非表示にするとクラッシュしない
- コンテンツが長いページは発生率が高いが、長いページでもクラッシュしないページはある
- クラッシュレポートをWindowsのイベントビューアーで確認すると
mshtml.dll
でエラーコード0xc0000005
が発生している
svg
は use
で読み込んでおりスプライトで特定のアイコンだけを出すという利用方法です。(use xlink:href='foo#icon1'
という指定)
発生条件から
- useで読み込んでいるのでsvgの読込分のメモリの確保が足りておらず違反?
- ページをまたぐようなsvgが存在する時に、超過して書込む等の違反?
と思い適当にデバッグしてたら
-
page-break-before:always
等のcssを当てると大丈夫だった所もクラッシュする
現象が確認できたことから改ページ周りが非常に怪しいと思い適当にcssいじってたら回避策見つかりました。