Bug 252161 - [leading-trim] nested elements shift text upwards
Summary: [leading-trim] nested elements shift text upwards
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-02-13 02:11 PST by Jan Nicklas
Modified: 2023-11-08 01:05 PST (History)
6 users (show)

See Also:


Attachments
Screenshot of the bug reproduction (80.49 KB, image/jpeg)
2023-02-13 02:11 PST, Jan Nicklas
no flags Details
Use case with EM (34.11 KB, image/png)
2023-11-08 01:05 PST, mic.gallego
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jan Nicklas 2023-02-13 02:11:57 PST
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
Comment 1 Radar WebKit Bug Importer 2023-02-13 20:00:19 PST
<rdar://problem/105430926>
Comment 2 Jan Nicklas 2023-06-08 02:51:02 PDT
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
Comment 3 mic.gallego 2023-11-08 01:05:13 PST
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 :/.
Comment 4 mic.gallego 2023-11-08 01:05:31 PST
Created attachment 468513 [details]
Use case with EM