background-clip: text clips only first line of wrapping text
Reported by
bbri...@microsoft.com,
Oct 21 2016
|
|||||||
Issue descriptionFrancois on my team pointed this out as an interop difference: [10/23/2017 updated repro url] https://jsfiddle.net/7qy68mc9/1/ [10/23/2017 background url is no longer available in original repro - removed] In Edge/Firefox background-clip applies to all text. In Chrome the behavior is very inconsistent and is best summarized in the title. We don't believe this is very common pattern, so starting with P3. Starting on Layout, as this is where we found this on our team, but I'm not sure what Blink component is the right
,
Oct 21 2016
#0 - it is always good to attach a screenshot in order to reduce result redundancy. For me, when the width is small enough to only accommodate for "Lorem ipsum" in the first line (and "dolor sit amet," on the second line), the second line shifts to the left, so I only see the "t," of "amet,"... Does anyone else reproduce this? (I added text-shadow in order to show where the text should have been placed) Resizing the box creates many weird behaviors of this sort.
,
Oct 21 2016
> it is always good to attach a screenshot in order to reduce result redundancy. Good point, I'll make sure to attach screenshots from now on.
,
Oct 21 2016
Thank you for the report! Sometimes it's a pain to make screenshots. When you have such nice small repro cases, just chrome version + jsbin/jsfiddle would be great. Very interesting effect when resizing the jsfiddle window...
,
Oct 23 2017
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Oct 23 2017
The background has gone. :-( But we have a bunch of issues around background text clipping, including that transparent text does not clip as one would hope.
,
Oct 23 2017
Updated sample: https://jsfiddle.net/7qy68mc9/1/ And the attached screenshot suggests the issue is still present.
,
Oct 23 2017
,
Jan 16 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/5c58e8edcd5bd47c926b59b541d644a49d6a03c5 commit 5c58e8edcd5bd47c926b59b541d644a49d6a03c5 Author: Fredrik Söderquist <fs@opera.com> Date: Tue Jan 16 15:15:48 2018 [PE] Fix offset computation for multi-line flow box 'background-clip: text' Since the background of a flow box is painted in a 'sliced' fashion, the paint rect/offset will be offset based on the "virtual" position of the line box relative to the first line box in the flow. When painting text for 'background-clip: text', adjust with this offset. Bug: 658326 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: Ia12c3d65025199fbcdeb1df647df08174ae88c24 Reviewed-on: https://chromium-review.googlesource.com/868151 Commit-Queue: Fredrik Söderquist <fs@opera.com> Reviewed-by: Stephen Chenney <schenney@chromium.org> Cr-Commit-Position: refs/heads/master@{#529425} [add] https://crrev.com/5c58e8edcd5bd47c926b59b541d644a49d6a03c5/third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-text-multiline-expected.html [add] https://crrev.com/5c58e8edcd5bd47c926b59b541d644a49d6a03c5/third_party/WebKit/LayoutTests/fast/backgrounds/background-clip-text-multiline.html [modify] https://crrev.com/5c58e8edcd5bd47c926b59b541d644a49d6a03c5/third_party/WebKit/Source/core/paint/BoxModelObjectPainter.cpp
,
Jan 17 2018
,
Jan 17 2018
Confirm fixed on Version 65.0.3323.2 (Official Build) canary (64-bit) Thank you Fredrik! |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by cbiesin...@chromium.org
, Oct 21 2016Components: -Blink>Layout Blink>Paint