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

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Matt Moran]

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.

[Matt Moran]

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

[Radar WebKit Bug Importer]

<rdar://problem/162376969>

[Ahmad Saleem]

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

[Karl Dubost]

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

[Karl Dubost]

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]

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]

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

[EWS]

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].