Bug 185220

Summary:

Floating figure using page-break-inside:avoid is cut off by column end

Product:

WebKit

Reporter:

Brad Andalman <bya>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 11

Hardware:

Unspecified

OS:

macOS 10.13

See Also:

https://bugs.webkit.org/show_bug.cgi?id=262349

Attachments:

Description	Flags
The html that exhibits the bug	none
Incorrect image layout	none
Image layout with page-break-inside:avoid commented out	none
Layout for smaller image	none

Brad Andalman

Reported 2018-05-02 14:56:25 PDT

Created attachment 339348 [details] The html that exhibits the bug The attached html includes three paragraphs of text that fills two columns. Immediately after the second paragraph is a figure that contains both an image and a caption. This figure has float:left set, so you would expect it to appear to the left of the subsequent (i.e. third) paragraph. The image, however, appears well after the end of the third (and final) paragraph. In fact, it is positioned so far down the second column that its bottom is cut off by the column, and the remainder of the image appears in a new column. The figure has page-break-inside:avoid set so that the image and the caption are not split between columns. Commenting this line out, though, "fixes" the layout issue. Because the image is too tall to be displayed in the first column, the image is correctly displayed at the top of the second column. Furthermore, the image and the caption are in the same column, so it is (perhaps) somewhat surprising that page-break-inside:avoid would have had any effect at all. Lastly, this incorrect layout is quite dependent upon the height of the image in the figure. In the attached html, the height of the image is set to 484. However, if that is changed to 483, then the layout issue goes away. This seems like it might be related to the height of the third paragraph's rect in the first column. Even though the height of the figure element is more than 483, changing the image's height causes it to be drawn correctly. (Though I'm filing as Safari 11, this bug also exists in Safari Technology Preview.)

Attachments
The html that exhibits the bug (3.49 KB, text/html) 2018-05-02 14:56 PDT, Brad Andalman	no flags	Details
Incorrect image layout (340.73 KB, image/png) 2018-05-02 14:58 PDT, Brad Andalman	no flags	Details
Image layout with page-break-inside:avoid commented out (336.63 KB, image/png) 2018-05-02 15:01 PDT, Brad Andalman	no flags	Details
Layout for smaller image (339.56 KB, image/png) 2018-05-02 15:03 PDT, Brad Andalman	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Brad Andalman

Comment 1 2018-05-02 14:58:41 PDT

Created attachment 339349 [details] Incorrect image layout

Brad Andalman

Comment 2 2018-05-02 15:01:23 PDT

Created attachment 339350 [details] Image layout with page-break-inside:avoid commented out Image that shows the expected layout. Commenting out the page-break-inside:avoid avoids the bug. This, however, isn't a real solution because it's needed to prevent the caption and the image from being separated.

Brad Andalman

Comment 3 2018-05-02 15:03:19 PDT

Created attachment 339352 [details] Layout for smaller image By changing the image height from 484 to 483, the bug seems to be avoided entirely.

Radar WebKit Bug Importer

Comment 4 2024-02-08 15:18:23 PST

<rdar://problem/122586647>

Note You need to log in before you can comment on or make changes to this bug.