Bug 252161 – [leading-trim] nested elements shift text upwards

• Status: NEW
• Component: Layout and Rendering

[Jan Nicklas]

Created attachment 464969 [details]
Screenshot of the bug reproduction

We are experiencing a bug with the recently released experimental leading-trim feature in Safari Technology Preview. 
The leading-trim feature is useful for removing extra spacing in text, allowing us to style it more predictably. 

However, when using multiple nested elements with leading-trim, the spacing is removed multiple times causing the text to shift upwards.

Steps to reproduce:

Nest multiple elements with the leading-trim property set
Observe the text being shifted upwards

Expected result:

The leading-trim property should only remove the extra spacing once, regardless of how many elements it is nested in.

Actual result:

The extra spacing is being removed multiple times, causing the text to shift upwards.

Environment:

Safari Technology Preview version: Release 163 (Safari 16.4, WebKit 18615.1.18.100.1)
Operating system: macOS Ventura Version 13.2 (22D49)

Code Sandbox Reproduction:
https://codepen.io/jantimon-the-scripter/pen/NWLKvNN

[Radar WebKit Bug Importer]

<rdar://problem/105430926>

[Jan Nicklas]

Updated Reproduction Demo for Safari Technology Preview Release 171 (Safari 16.4, WebKit 18616.1.15)

Updated to the latest css property name (from leading-trim to text-box-trim)

https://codepen.io/jantimon-the-sans/pen/zYMxqOw

The problem is still the same as described in the initial issue:

Nest multiple elements with the text-box-trim property set
shift the text upwards multiple times

Hi,

I am trying to use this feature as a progressive enhancement for a better alignment, but unfortunately the way it renders is... strange. We are trying to use this but whenever a customer italicize a text inside, it is shifted up: https://codepen.io/bakura10/pen/rNPyyvg

I am also attaching another screenshot.

According to CanIUse, this feature will be enabled by default in next version,but this currently makes it nearly unusable :/.

Created attachment 468513 [details]
Use case with EM