Bug 269818

Summary:

REGRESSION(IFC multicol): Satisfying `widows` can cause a floating image to overlap text

Product:

WebKit

Reporter:

Brad Andalman <bya>

Component:

Layout and Rendering

Assignee:

Antti Koivisto <koivisto>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, bw, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

Mac (Apple Silicon)

OS:

macOS 14

Attachments:

Description	Flags
HTML exhibiting the bug (text overlaps square)	none
Rendered HTML showing the bug (text overlaps square)	none
Screenshots of Chrome and Firefox correctly rendering this HTML (no text in the square)	none
Test reduction	none

Brad Andalman

Reported 2024-02-20 15:41:19 PST

Created attachment 469992 [details] HTML exhibiting the bug (text overlaps square) In the attached HTML, I have a multi-column layout with a floating “image” that must be positioned at the top of the second column. (The image is partially transparent so it’s easy to see when it overlaps text.) When `widows` is not set on the paragraph that spans these two columns, the text correctly wraps around the image. This results in two lines in the second column. However, when `widows` is set to 3, the entire last line in the first column now appears at the top of the second column, and intersects the floating image. I’ll also attach screenshots that shows this HTML in Safari (incorrect), Chrome (correct), and Firefox (correct). I also tested in Safari 16.6, where it renders correctly. Lastly, I checked in the latest WebKit build (275072@main.zip) to see if it was fixed there already but, sadly, it was not.

Attachments
HTML exhibiting the bug (text overlaps square) (1.93 KB, text/html) 2024-02-20 15:41 PST, Brad Andalman	no flags	Details
Rendered HTML showing the bug (text overlaps square) (144.81 KB, image/png) 2024-02-20 15:41 PST, Brad Andalman	no flags	Details
Screenshots of Chrome and Firefox correctly rendering this HTML (no text in the square) (483.92 KB, image/png) 2024-02-20 15:42 PST, Brad Andalman	no flags	Details
Test reduction (421 bytes, text/html) 2024-02-20 17:09 PST, zalan	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Brad Andalman

Comment 1 2024-02-20 15:41:51 PST

Created attachment 469993 [details] Rendered HTML showing the bug (text overlaps square)

Brad Andalman

Comment 2 2024-02-20 15:42:29 PST

Created attachment 469994 [details] Screenshots of Chrome and Firefox correctly rendering this HTML (no text in the square)

Radar WebKit Bug Importer

Comment 3 2024-02-20 16:38:26 PST

<rdar://problem/123343009>

zalan

Comment 4 2024-02-20 17:09:45 PST

Created attachment 469995 [details] Test reduction

Brad Andalman

Comment 5 2024-02-20 17:40:37 PST

Oh. That’s a much better test. Thanks! And thanks, as always, for looking at this!

zalan

Comment 6 2024-02-20 19:48:39 PST

(In reply to Brad Andalman from comment #5) > Oh. That’s a much better test. Thanks! > > And thanks, as always, for looking at this! np, your test reduction was pretty good already (I just prefer the least amount of inline content possible -to make debugging easier)

zalan

Comment 7 2024-02-21 16:18:45 PST

apparently when we move lines across columns due to widow/orphan constraints, we happily ignore intrusive floats (floats sticking out from previous block containers). I have to defer to @antti here (will talk to him about this)

Antti Koivisto

Comment 8 2024-02-29 01:17:07 PST

Pull request: https://github.com/WebKit/WebKit/pull/25285

Brad Andalman

Comment 9 2024-02-29 11:45:51 PST

Thanks so much for this fix, @antti!

EWS

Comment 10 2024-03-04 09:24:15 PST

Committed 275629@main (65ee365616b1): <https://commits.webkit.org/275629@main> Reviewed commits have been landed. Closing PR #25285 and removing active labels.

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