fix: preserve -webkit-box display so -webkit-line-clamp survives cloning - #172
Open
razchiriac wants to merge 1 commit into
Open
fix: preserve -webkit-box display so -webkit-line-clamp survives cloning#172razchiriac wants to merge 1 commit into
razchiriac wants to merge 1 commit into
Conversation
Chromium reports the computed `display` of a `display: -webkit-box` element as `flow-root` while `-webkit-line-clamp` is clamping it. copyCssStyles copied that computed value onto the clone, which dropped the legacy box layout, so multi-line ellipsis rendered unclamped or clipped without the ellipsis in the output image. When the computed style carries `-webkit-box-orient: vertical` and an active `-webkit-line-clamp`, restore `display: -webkit-box` on the clone. Chromium-only, like the neighboring text-overflow fix. Fixes qq15725#121
Open
enpitsuLin
approved these changes
Jul 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #121.
Root cause
Chromium reports the computed
displayof adisplay: -webkit-boxelement asflow-rootwhile-webkit-line-clampis actively clamping it.copyCssStylescopies that computed value inline onto the clone, which drops the legacy box formatting context that-webkit-line-clamprequires — so multi-line ellipsis renders unclamped (or clipped without the ellipsis) in the output image.-webkit-line-clampand-webkit-box-orientthemselves are enumerated and copied correctly; onlydisplayis mutated.Measured in headless Chromium: live clamped element 40px; clone rebuilt from enumerated computed styles 80px (unclamped); clone with
display: -webkit-boxrestored 40px again. This confirms the diagnosis @zstings posted on #121.Change
In the existing
IN_CHROMEfix block ofcopyCssStyles(next to thetext-overflowworkaround): when the diffed style hasdisplay: flow-root,-webkit-box-orient: vertical, and an active-webkit-line-clamp, restoredisplay: -webkit-boxon the clone.We've been running the equivalent repair in production for months while capturing full-page screenshots of a dashboard-style web app.
Test
New fixture
test/fixtures/css.-webkit-line-clamp.html+ reference snapshot. With the fix the capture shows exactly two lines ending in…; without it, the ellipsis is lost and text is clipped mid-word. Full suite passes (34/34; the pre-existing environment-dependent snapshot warnings are unchanged vsmain).Known limitations
display: -webkit-inline-boxcomputes toinline-blockand can't be safely rewritten back (rewriting everyinline-blockwould be far too aggressive) — inline clamping remains broken as before.display: flow-roottogether with-webkit-box-orient: verticaland-webkit-line-clamp(a combination that does not clamp live) would be clamped in the clone. This seems pathological enough to accept; distinguishing it would require reading specified (not computed) style.includeStyleProperties, callers must includedisplay,-webkit-box-orient, and-webkit-line-clampfor the fix to apply.