Firefoxでページの一部が印刷されない

忘却録。

現象

当ブログでは、Firefoxで印刷(印刷プレビュー)すると、2ページ目以降が印刷されない。1ページ目のみ印刷される。現象でした。
他のブログを確認してみたところ、コンテンツ部分を1ページに収まる範囲のみ印刷するものもありました。ヘッダー・フッター・コンテンツが別ページに印刷されるため、印刷ページ数は3ページでした。もちろんコンテンツ部分に2ページ以上の量があるページです。

※Firefox72(現在最新)で確認
※Chromeでは、2ページ目以降を含めて想定通りに印刷される

原因

display: flex;が原因です。

<body>display: flex;が指定されていたため、flexが指定されている要素が正常に印刷できず、問題現象が発生していました。flexの指定方法次第で、「2ページ目以降が印刷されない」「ページの一部が印刷されない」などの複数の現象として発生するようです。

※bugzillaには、本件を扱った次の起票があります。
 939897 - [meta] Support shifting / splitting flex items between continuations of a fragmented flex container (flexbox content truncated when printing)

解決策

display: flex;」を「display: block;」等に置き換える。

flexが問題のため、flexの付いた要素を印刷時のみ他プロパティに変更して対応します。

@media print {
  body {
    display: block;
  }
}

参考

コメント