Floating figure intrudes before new section set to be break-before

[yamahige]

The sections are set to ‘break-before: page;,’ but the figure from the previous section intrudes before the next section on a new page. How can I ensure that sections are displayed from the top of new pages, even if figures are set to ‘float: block-start; float-reference: page;’?

sample: https://gist.githubusercontent.com/yamahige/4077e9b3d8f6a067ee9e1fd8beb039b0/raw/882592611cd6e115ba8a933d75d37ae305547a86/new_page_floating_figure.html

Test with Vivliostyle Viewer : https://vivliostyle.org/viewer/#src=https://gist.githubusercontent.com/yamahige/4077e9b3d8f6a067ee9e1fd8beb039b0/raw/882592611cd6e115ba8a933d75d37ae305547a86/new_page_floating_figure.html

Result screenshot (version: 2.29.0):

expected:

[MurakamiShinyu]

I agree that the current behavior of page floats + forced page breaks is not very good and needs to be fixed.

A workaround is adding the following style:

section::after {
  content: "";
  display: block;
  clear: all;
}

Test with Vivliostyle Viewer: https://vivliostyle.org/viewer/#src=https://gist.githubusercontent.com/yamahige/4077e9b3d8f6a067ee9e1fd8beb039b0/raw/882592611cd6e115ba8a933d75d37ae305547a86/new_page_floating_figure.html&style=data:,/*%3Cviewer%3E*/%0A/*%3C/viewer%3E*/%0Asection::after%20%7B%0A%20%20content:%20%22%22;%0A%20%20display:%20block;%0A%20%20clear:%20all;%0A%7D

About clear: all see https://docs.vivliostyle.org/#/supported-css-features#css-page-floats

• clear
  • When all is specified on a block-level box (not a page float), the block-start edge of the box gets pushed down so that the edge comes after any block-start/block-end page float of which anchors are before the box in the document order.

[yamahige]

I see.

A workaround is adding the following style:

Thank you!