Figure borders are being doubled in paged.js when floated figure is pushed to next page

[geealbers]

Before proceeding, check to make sure there isn’t an existing issue for this bug.

• I have searched the existing issues and determined this is a new bug.

Steps to reproduce

1. Start a new Quire project
2. Run quire build and then quire pdf to generate the PDF
3. Open PDF to page 13 for sample of issue

Actual behavior

Stray borders appear at the end of the text, which are an echo of the borders that appear with the figure image on the following page. See screenshots below.

Also worth noting that the image has a float, and in my testing it looked like that might be connected to the issue. I was unable to reproduce this behavior on a non-floating image.

And I did try break-inside: avoid but it didn't solve the issue.

Expected behavior

The borders and figure images should always stay together, and not duplicate across the page

Version numbers

Quire CLI 1.0.0-rc.7
Quire 11ty 1.0.0-rc.9
Node 18.16.0

What browsers are you seeing the problem on?

No response

Relevant Terminal/Shell output

No response

Supporting Information

No response

[fchasen]

There is something strange happening with the fragmentation here, it shouldn't be finding that the image has gone to the next page without also seeing the figure div has - will continue to debug it and hopefully release a more general upstream fix.

For now a quick fix is to just add:

.q-figure:empty {
	display:none;
}

[geealbers]

Thanks @fchasen, I'll add that workaround in for now.

FYI, I also noticed that the figure as it appears on the following page is missing it's top padding, which is being stripped out with:

.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div [data-split-from] {
    text-indent: unset;
    margin-top: unset;
    padding-top: unset;
    initial-letter: unset;
}

So I added an additional rule to the workaround to put the padding back in:

.pagedjs_pages > .pagedjs_page > .pagedjs_sheet > .pagedjs_pagebox > .pagedjs_area > div .q-figure[data-split-from] {
  padding-top: 1rem;
}

[Erin-Cecele]

We are currently working on a fix for your bug! Stay tuned for updates, and thank you for your important contribution.

[Erin-Cecele]

@geealbers As far as I can tell, this issue appears to be resolved in cli-rc.14 / 11ty-rc.17