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

忘却録。

現象

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

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

原因

display: flex;が原因のようです。

<body>display: flex;が指定されていたため、flexが指定されている要素が正常に印刷されなかったようです。flexの指定方法次第で、印刷時のページレイアウトが崩れる現象として発生するようです。

※Firefoxの不具合なのか、仕様なのかは不明

解決策

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

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

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

参考

コメント