Explicitly-sized element breaks pagination

[RobMayer]

I tested this on v0.5.0-beta1 as well as @NigelCunningham's PR version

I have a div with an svg (I also tried with an img, and another div). The Div has an explicitly defined height, or a width and an aspect ratio. That height causes it to fall across a page break when rendered. It doesn't show up. It seems to be still stuck on the original page. It makes no difference if I've told the div to break-inside avoid. It will not jump to the next page.

[RobMayer]

it works if the height happens to fit in the remaining space on the page...

but the moment that the height causes it to cross the boundary of a page, it vanishes.

[julientaq]

if i use your code, i get this:

are you using chromium / chrome? or any other browser?

[RobMayer]

chrome on windows 10, tried in both canary and stable.

thanks for your time on Mattermost! here's a recap of what we found:

this all happens because the div in question is the last (or would be the last) element on a page.

it would appear that on windows, the div gets placed onto the first page, but after the point of the page break. where it should jump onto the new page.

it makes no difference if the div in question is within the <figure> or not.

it makes no difference if the div is empty, has an inline-element, text, or a block element as a child.

I've removed all instances of break-inside: avoid, and the div now gets painted on the first page, before the break, but gets truncated. it should be, 400px tall (or whatever height) but it only shows what will fit on the first page - it shows nothing on the second.

adding back "break-inside: avoid" on any ancestor of the div in question causes the div to vanish past the supposed page break, and not appear - in whole, or in part - on the next page.

[RobMayer]

on the Mattermost, it was suggested that I put an img inside the figure, to see if that got treated any differntly:

I tried article > figure > div > img article > figure > img still breaks article > img

I've tried with css that, on the image:

• sets the width to auto;
• sets the max-width t;o 100%;
• sets the width to 100%;
• sets the width to 4in;
• sets the height to auto;
• sets the height to 4in;
• sets the height to 100px; I tried those in all combinations

the only ones that worked was when the width was set such that the auto-height was less than the remaining space on the page or the explicit height was less than the remaining space on the page.

I also tried setting an explicit width on the img tag directly instead of through css: what's interesting there is that the width attribute got set to 0 when I set it to, say, 300 in the raw html

in instances where the img was within a figure, I also tried it with "break-inside: avoid" being set and not being set on the figure, just to see if that changed behaviour.