Bug 252161

Summary:

[leading-trim] nested elements shift text upwards

Product:

WebKit

Reporter:

Jan Nicklas <j.nicklas>

Component:

Layout and Rendering

Assignee:

zalan <zalan>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, mic.gallego, ntim, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

All

OS:

All

Attachments:

Description	Flags
Screenshot of the bug reproduction	none
Use case with EM	none

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