Bug 290727

Summary:

content shifted downward with text-box-trim and vertical-align:bottom

Product:

WebKit

Reporter:

xworld21

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, fantasai.bugs, karlcow, koivisto, simon.fraser, vitor.roriz, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 18

Hardware:

Unspecified

OS:

Unspecified

See Also:

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

Attachments:

Description	Flags
Example with different values of vertical-align.	none
Screenshot of Safari 18.2	none
Screenshot of Chrome 134	none
rendering in safari, firefox, chrome	none
[fast-cq]Patch	none

xworld21

Reported 2025-03-30 11:12:23 PDT

Created attachment 474761 [details] Example with different values of vertical-align. WebKit exhibits a strange behaviour when an inline block has `vertical-align:bottom` inside a container with `text-box-trim:edge`. The inline block seems to be attached to the top of the line and it overflows downward. Using `vertical-align:text-bottom` behaves more like I would expect. I am attaching a simple example and screenshots of Chrome and Safari for comparison.

Attachments
Example with different values of vertical-align. (379 bytes, text/html) 2025-03-30 11:12 PDT, xworld21	no flags	Details
Screenshot of Safari 18.2 (15.76 KB, image/png) 2025-03-30 11:12 PDT, xworld21	no flags	Details
Screenshot of Chrome 134 (13.13 KB, image/png) 2025-03-30 11:13 PDT, xworld21	no flags	Details
rendering in safari, firefox, chrome (1.01 MB, image/png) 2025-03-31 22:24 PDT, Karl Dubost	no flags	Details
[fast-cq]Patch (9.33 KB, patch) 2025-04-04 12:38 PDT, alan	no flags	Details Formatted Diff Diff
View All Add attachment proposed patch, testcase, etc.

xworld21

Comment 1 2025-03-30 11:12:51 PDT

Created attachment 474762 [details] Screenshot of Safari 18.2

xworld21

Comment 2 2025-03-30 11:13:19 PDT

Created attachment 474763 [details] Screenshot of Chrome 134

Karl Dubost

Comment 3 2025-03-31 22:24:10 PDT

Created attachment 474786 [details] rendering in safari, firefox, chrome tested on Safari Technology Preview 125/18.4 20622.1.6 Firefox Nightly 138.0a1 13825.3.11 Google Chrome Canary 136.0.7102.0 7102.0 All browsers have different behaviors here for the way the boxes are drawn. but both Firefox and Chrome align with the block bottom.

Radar WebKit Bug Importer

Comment 4 2025-04-04 10:42:52 PDT

<rdar://problem/148604811>

alan

Comment 5 2025-04-04 12:38:05 PDT

Created attachment 474832 [details] [fast-cq]Patch

EWS

Comment 6 2025-04-04 17:05:45 PDT

Committed 293283@main (35a3dec2b907): <https://commits.webkit.org/293283@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 474832 [details].

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