Bug 315222 – REGRESSION (Safari 18 -> 26): Outer inline element renders above nested inline-block containing a block-level image, causing layout shift and truncation

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Jacob Goldman]

Created attachment 479742 [details]
Bug repro HTML file.

There is a rendering regression between Safari v18 and Safari v26 involving the interaction of display: inline containers, nested display: inline-block elements, and deeply nested display: block elements. This affects certain display advertising creative that end up truncated due to the iframe overflow hidden constraints.

In Safari v18, the outer display: inline <div> shares the same baseline/line-box with its nested inline-block <ins> and the block-level <img> it contains.

In Safari v26, the outer inline <div> is suddenly allocated its own line box or block space above the nested content. Because the container has overflow: hidden and strict dimensions (e.g., simulating a cross-origin ad iframe), this newly added vertical space at the top pushes the 100px-tall <img> downwards, pushing it partially outside the truncation boundary.

Attached is an illustration of the issue. Expected: blue line is drawn inline within the 320x100 img. Actual: blue line is drawn on-top of the img and pushes the content down, causing truncation.

[Radar WebKit Bug Importer]

<rdar://problem/177560469>

[alan]

Created attachment 479765 [details]
Screenshot (Safari -> Chrome -> Fix)

I think this has already (partially) progressed on trunk and the missing piece is a baseline alignment bug (see bug 315324). After landing the baseline alignment fix, Safari will be matching Chrome's rendering (so we won't be matching Safari 18 anymore but it's progression).

[alan]

The fix for bug 315324 got landed at 313769@main. WebKit matches Blink now -> I am marking this as config changed.