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.
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.
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. :)
Created attachment 471471 [details] minimal tescase Load this testcase in all 3 browsers.
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.
<rdar://problem/128527752>
It's indeed a kind of regression. Old build shows 2 lines but with the inline block being visible.
This is a regression of https://github.com/WebKit/WebKit/commit/bf48ac60d4bb84f88ceb026495d8d9722be2ab5f Bug 261030 rdar://problem/114878221
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. :)
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.
Any updates on this regression?
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 ***