Bug 274308 – (regression) -webkit-line-clamp showing one line less line with inline-block

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Tanel Terras]

It seems that with fixes and changes in Safari 17, `-webkit-line-clamp` and `display: inline-block` causes weird bugs.
When clamped content includes elements with `display: inline-block`, -webkit-line-clamp value seems to subtracted by one (at least visually).

Examples: https://lit.dev/playground/#gist=4f7950f5ad46952aac643c501fa68f4e
Reproduction case includes two examples: Web Component that has slotted content (like in our Design System) and a regular lightDOM example with exact same visual behaviour.

When compared with Safari 16 the handling of `inline-block` element was much different - it seems to me visually that Safari 16 handled inline-block as inline element and in Safari 17 as block element.

Chrome and Firefox handle these cases as expected (by me) so figured it is a bug specific to Safari 17. Although Safari < 17 also has its quirks it is somewhat manageable in our use cases.

[Tanel Terras]

Interesting observation from our Design System is also that when -webkit-line-clamp is toggled, Safari 17 clamps correctly after reassignment of -webkit-line-clamp.  

We are toggling on button click, then reassign -webkit-line-clamp with same initial value through JS.

[Karl Dubost]

Created attachment 471469 [details]
rendering in safari, firefox, chrome

Thanks a lot Tanel for the report

1st paragraph shows 
  1 line in Safari 
  2 lines in Firefox/Chrome
2nd paragraph shows 
  2 lines in Safari 
  3 lines in Firefox/Chrome

Probably needs a simpler testcase. :)

[Karl Dubost]

Created attachment 471471 [details]
minimal tescase

Load this testcase in all 3 browsers.

[Karl Dubost]

Created attachment 471472 [details]
rendering in safari, firefox, chrome (minimal test case)

We can the difference in Safari when it includes an inline-block content.

[Radar WebKit Bug Importer]

<rdar://problem/128527752>

[Karl Dubost]

It's indeed a kind of regression.
Old build shows 2 lines but with the inline block being visible.

[Karl Dubost]

This is a regression of https://github.com/WebKit/WebKit/commit/bf48ac60d4bb84f88ceb026495d8d9722be2ab5f

Bug 261030
rdar://problem/114878221

[Karl Dubost]

<rdar://problem/128527752>

[Karl Dubost]

So the fix from Alan, remove the inline block inside the line-clamp, but also in the same time reduced the line-clamp by one line. :)

[Tanel Terras]

Thanks for looking into this!

Sorry for the overly complicated testcase. I was in process of ruling out that <slot> and its `display: contents` affect this somehow.

[Tanel Terras]

Any updates on this regression?

[alan]

This works on trunk, processed at https://commits.webkit.org/282348@main (going to forward dupe it).

*** This bug has been marked as a duplicate of bug 277949 ***