your-name Firefoxで2ページ目以降が印刷されない

すみません、入力中に誤って起票してしまったので起票後のコメントで内容を記入します。（ブログ記事の方にコメントさせていただいた件です）

Jan 14 '17 03:01 piroor

Mozilla Firefox（ESR45、Nightly 53.0a1）でデモ用データの印刷を試みた所、2ページ目以降が出力されない結果になりました。調査の結果、app-rootがdisplay:flexである場合にその内容がページ送りされず1ページ目の印刷範囲外に並べられてしまっているという状況であることが分かりました。

現時点では、CSS flexible boxの仕様（ https://dev.w3.org/csswg/css-flexbox/ ）とFirefoxのどちらが悪いのかの判断がついていないのですが、こちらのアプリケーションで作成された構造と同様のテストケースを作成したところ問題を再現できたため、FirefoxのBugzillaにも報告しました。 https://bugzilla.mozilla.org/show_bug.cgi?id=1331151

暫定的な回避策として、コンパイル後のCSSの末尾に以下のようなルールを付け足して印刷時にはCSS flexible boxを使わないようにすることで、2ページ目以降が印刷されるようになる事を確認できています。

@media print {
  app-root {
    display: block;
  }
  app-cards {
    height: 296mm;
    overflow: hidden;
  }
}

Jan 14 '17 03:01 piroor

上記Bugは重複として処理され、以下のBugに誘導されました。 939897 – Support shifting / splitting flex items between continuations of a fragmented flex container https://bugzilla.mozilla.org/show_bug.cgi?id=939897 2013年から認識されているFirefoxの問題ということのようですが、今の所修正の目処が立っていないようです。

Jan 14 '17 03:01 piroor

@piroor コメント&issueありがとうございます！コードも助かります 😊 こちらのコード適用してChromeのほうにも影響が出なければ、デプロイさせていただきます！助かります 🙌

Jan 14 '17 04:01 yoshiko-pg

あ、上記コードはコンパイル後のCSSでむりやりデバッグした結果の物なので、もし実際に使われるときはソース内の適切な位置に追記して頂ければ幸いです。 https://github.com/yoshiko-pg/your-name/blob/master/src/app/components/preview/preview.component.css おそらくここでしょうか？（いま手元で動作させられる環境が無いため未検証です）

Jan 14 '17 07:01 piroor

先月末に使わせて頂いた際にまだ再現しました。まだ検証&デプロイが終わっていない状態でしょうか? (とりあえず Chrome を使って回避しています)

Dec 18 '17 02:12 thinca

すみません。いただいたコードを反映させると2ページ目移行は表示されるようになったのですがChromeも含め印刷エリアが上にずれてしまい、そこからの調整をどうしようか考えているうちにそのままになってしまっていました。。
複数ブラウザ対応できるに越したことはないのでFirefox対応のissueは残しておきたいですが、私は普段Chromeメインで使っているためすぐに対応はできないかもしれないです。。

Dec 18 '17 15:12 yoshiko-pg

ひとまず Chrome を使えば回避できるので特別困ってはいないです。続報が見当たらなかったので一応報告という感じでした。便利に使わせてもらっています！

Dec 18 '17 16:12 thinca

ありがとうございます！続報できていなかったのはpiroorさんにも大変申し訳ないです🙏もし今後改善できましたらまた書きます！

Dec 19 '17 00:12 yoshiko-pg

your-name your-name copied to clipboard

Firefoxで2ページ目以降が印刷されない

your-name
your-name copied to clipboard