css - Print CSS - Chrome での改ページ

Question

私は最近、クロムが奇妙な振る舞いをし、CSS ルールに従わないというこの問題に行き詰まりました。

私のページには、印刷中に分割したくない大きなセクションがあります。以下はコードです

body.index .section{
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid;
}

Chrome 以外のすべてのブラウザで問題なく動作します。クロムでは、次のようになります

赤いセクションは、分割された div を示しています。

PS: 問題を回避するため、ページをぼかしました。

Answer 1

セクションに追加position: relativeしてみてください。

body.index .section{
    position:relative;
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid;
}