現象
後述のサンプル HTML について Firefox(v110.0) で印刷プレビューを表示すると、以下の問題が発生しました。
- 画像の上に配置している四角形の svg が表示されません。
試したこと
- DIV を IMG タグに変えると、正常に svg が表示されました。
- ただし、諸事情あって IMG タグには変更できません。
- 親の DIV から
transform: translate(0);
を消すと、正常に svg が表示されました。
知りたいこと
- svg が表示されない理由を知りたいです。
transform: translate(0);
が怪しい気がするけど、理由がわからないので教えていただきたいです。- transform を削除すると、Chrome/Safari/Firefoxそれぞれの印刷プレビュー結果(svg の位置や大きさ)がバラバラになりました。
- 「img にする」、「transform をやめる」以外の解決方法を知りたいです。
サンプル HTML
<html lang="ja">
<body>
<div style="width: 500px; height: 1500px; transform: translate(0);">
<div style="background-image: url(example.png); background-size: contain; background-repeat: no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; width: 500px; height: 1500px;"></div>
<svg viewBox="0 0 500 1500" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle; position: absolute; top: 0; left: 0;">
<rect x="40" y="680" width="420" height="140" stroke="#ff0000" fill="transparent"></rect>
</svg>
</div>
</body>
</html>