Skip to main content
ブラウザのバージョンを追記
ソース リンク
vips
  • 17
  • 4

現象

後述のサンプル HTML について Firefox(v110.0) で印刷プレビュー(A4用紙)を表示すると、以下の問題が発生しました。

  • div の背景に設定した縦長画像に空白が入ります(印刷プレビュー3ページ目の先頭)。
  • 上記 div の上に配置している四角形の svg が表示されません。

試したこと

  • DIV を IMG タグに変えると、空白が入らず正常に表示されました。
    • ただし、諸事情あって IMG タグには変更できません。
  • 親の DIV から transform: translate(0); を消すと、空白が入りませんでした。
    • ただし、縦長画像の次に、白紙のページが2ページ追加されました。

知りたいこと

  • 画像の途中で空白が入る理由を知りたいです。(ただのバグ?)
    • transform: translate(0); が怪しい気がするけど、理由がわからないので教えていただきたいです。
  • 「img にする」、「transform をやめる」以外の解決方法を知りたいです。
  • 印刷プレビューで svg が表示されないという挙動がありますが、それは別件で質問させていただいているためここでは言及していません。

サンプル HTML

<html lang="ja">
<body>
<div style="max-height: 3000px; max-width: 500px; width: 100%; 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: 3000px;"></div>
    <svg viewBox="0 0 500 3000" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle; position: absolute; top: 0; left: 0;">
        <rect x="50" y="100" width="400" height="100" stroke="#ff0000" fill="transparent"></rect>
    </svg>
</div>
</body>
</html>

背景画像 (example.png)
背景画像

印刷プレビューでは空白が追加される
印刷プレビュー

現象

後述のサンプル HTML について Firefox で印刷プレビュー(A4用紙)を表示すると、以下の問題が発生しました。

  • div の背景に設定した縦長画像に空白が入ります(印刷プレビュー3ページ目の先頭)。
  • 上記 div の上に配置している四角形の svg が表示されません。

試したこと

  • DIV を IMG タグに変えると、空白が入らず正常に表示されました。
    • ただし、諸事情あって IMG タグには変更できません。
  • 親の DIV から transform: translate(0); を消すと、空白が入りませんでした。
    • ただし、縦長画像の次に、白紙のページが2ページ追加されました。

知りたいこと

  • 画像の途中で空白が入る理由を知りたいです。(ただのバグ?)
    • transform: translate(0); が怪しい気がするけど、理由がわからないので教えていただきたいです。
  • 「img にする」、「transform をやめる」以外の解決方法を知りたいです。
  • 印刷プレビューで svg が表示されないという挙動がありますが、それは別件で質問させていただいているためここでは言及していません。

サンプル HTML

<html lang="ja">
<body>
<div style="max-height: 3000px; max-width: 500px; width: 100%; 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: 3000px;"></div>
    <svg viewBox="0 0 500 3000" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle; position: absolute; top: 0; left: 0;">
        <rect x="50" y="100" width="400" height="100" stroke="#ff0000" fill="transparent"></rect>
    </svg>
</div>
</body>
</html>

背景画像 (example.png)
背景画像

印刷プレビューでは空白が追加される
印刷プレビュー

現象

後述のサンプル HTML について Firefox(v110.0) で印刷プレビュー(A4用紙)を表示すると、以下の問題が発生しました。

  • div の背景に設定した縦長画像に空白が入ります(印刷プレビュー3ページ目の先頭)。
  • 上記 div の上に配置している四角形の svg が表示されません。

試したこと

  • DIV を IMG タグに変えると、空白が入らず正常に表示されました。
    • ただし、諸事情あって IMG タグには変更できません。
  • 親の DIV から transform: translate(0); を消すと、空白が入りませんでした。
    • ただし、縦長画像の次に、白紙のページが2ページ追加されました。

知りたいこと

  • 画像の途中で空白が入る理由を知りたいです。(ただのバグ?)
    • transform: translate(0); が怪しい気がするけど、理由がわからないので教えていただきたいです。
  • 「img にする」、「transform をやめる」以外の解決方法を知りたいです。
  • 印刷プレビューで svg が表示されないという挙動がありますが、それは別件で質問させていただいているためここでは言及していません。

サンプル HTML

<html lang="ja">
<body>
<div style="max-height: 3000px; max-width: 500px; width: 100%; 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: 3000px;"></div>
    <svg viewBox="0 0 500 3000" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle; position: absolute; top: 0; left: 0;">
        <rect x="50" y="100" width="400" height="100" stroke="#ff0000" fill="transparent"></rect>
    </svg>
</div>
</body>
</html>

背景画像 (example.png)
背景画像

印刷プレビューでは空白が追加される
印刷プレビュー

ソース リンク
vips
  • 17
  • 4

Firefox で印刷プレビューすると、縦長画像に空白が入る

現象

後述のサンプル HTML について Firefox で印刷プレビュー(A4用紙)を表示すると、以下の問題が発生しました。

  • div の背景に設定した縦長画像に空白が入ります(印刷プレビュー3ページ目の先頭)。
  • 上記 div の上に配置している四角形の svg が表示されません。

試したこと

  • DIV を IMG タグに変えると、空白が入らず正常に表示されました。
    • ただし、諸事情あって IMG タグには変更できません。
  • 親の DIV から transform: translate(0); を消すと、空白が入りませんでした。
    • ただし、縦長画像の次に、白紙のページが2ページ追加されました。

知りたいこと

  • 画像の途中で空白が入る理由を知りたいです。(ただのバグ?)
    • transform: translate(0); が怪しい気がするけど、理由がわからないので教えていただきたいです。
  • 「img にする」、「transform をやめる」以外の解決方法を知りたいです。
  • 印刷プレビューで svg が表示されないという挙動がありますが、それは別件で質問させていただいているためここでは言及していません。

サンプル HTML

<html lang="ja">
<body>
<div style="max-height: 3000px; max-width: 500px; width: 100%; 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: 3000px;"></div>
    <svg viewBox="0 0 500 3000" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle; position: absolute; top: 0; left: 0;">
        <rect x="50" y="100" width="400" height="100" stroke="#ff0000" fill="transparent"></rect>
    </svg>
</div>
</body>
</html>

背景画像 (example.png)
背景画像

印刷プレビューでは空白が追加される
印刷プレビュー