Bug 300478

Summary:

Incorrect box sizing on span when it has no siblings and `padding-left + margin-left === 0`

Product:

WebKit

Reporter:

Matt Moran <mattm>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, karlcow, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 26

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Demo of bug. The first line should match the others. The background is for visualisation purposes only.	none
Screenshot of rendering in Safari. Firefox and Chrome render all spans the same.	none
screen recording on Safari	none
[fast-cq]Patch	none

Matt Moran

Reported 2025-10-09 17:33:36 PDT

Created attachment 477037 [details] Demo of bug. The first line should match the others. The background is for visualisation purposes only. STR: - have a span as the only child of a block element - apply padding-left, and an equivalent negative margin-left - see that the resulting box is incorrect, symptoms are: - `getBoundingClientRect()` returns incorrect left & width. - the background renders in the wrong position.

Attachments
Demo of bug. The first line should match the others. The background is for visualisation purposes only. (696 bytes, text/html) 2025-10-09 17:33 PDT, Matt Moran	no flags	Details
Screenshot of rendering in Safari. Firefox and Chrome render all spans the same. (28.68 KB, image/png) 2025-10-09 17:34 PDT, Matt Moran	no flags	Details
screen recording on Safari (521.99 KB, video/quicktime) 2025-10-13 23:51 PDT, Karl Dubost	no flags	Details
[fast-cq]Patch (6.20 KB, patch) 2026-04-11 19:46 PDT, alan	no flags	Details Formatted Diff Diff
View All Add attachment proposed patch, testcase, etc.

Matt Moran

Comment 1 2025-10-09 17:34:28 PDT

Created attachment 477038 [details] Screenshot of rendering in Safari. Firefox and Chrome render all spans the same.

Radar WebKit Bug Importer

Comment 2 2025-10-10 10:04:38 PDT

<rdar://problem/162376969>

Ahmad Saleem

Comment 3 2025-10-10 10:06:04 PDT

Chrome Canary 143 and Firefox NIghtly 145 match each other while Safari 26.1 differs and have first case broken.

Karl Dubost

Comment 4 2025-10-13 23:38:39 PDT

Matt, thanks for the report and the reduced test case (super useful). Does it affect a specific page on the canva website?

Karl Dubost

Comment 5 2025-10-13 23:51:55 PDT

Created attachment 477066 [details] screen recording on Safari This is even more frustrating that this is happening exactly for the equality. -30.1px PASS -30.0px FAIL -29.9px PASS This is really a rounding issue. -30.015624047px PASS -30.015624046px FAIL … -30.0px FAIL … -29.99999905px FAIL -29.99999904px PASS

Matt Moran

Comment 6 2025-10-14 23:29:35 PDT

Hey Karl, thanks for looking into this so quickly! > Does it affect a specific page on the canva website? Canva renders designs as html - we don't use a web canvas or render to pixels. I found this quirk while implementing rendering for a new text feature, but I'm working around it by prepending an additional span like the "X5" example.

alan

Comment 7 2026-04-11 19:46:35 PDT

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

EWS

Comment 8 2026-04-13 05:23:41 PDT

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

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