New issue
Advanced search Search tips

Issue 658326 link

Starred by 2 users

Issue metadata

Status: Verified
Owner:
Closed: Jan 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

background-clip: text clips only first line of wrapping text

Reported by bbri...@microsoft.com, Oct 21 2016

Issue description

Francois 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 
 
Cc: cbiesin...@chromium.org
Components: -Blink>Layout Blink>Paint
A paint issue, I guess?

Comment 2 by phistuck@gmail.com, 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.
background-clip-text-second-line-shifts.png
158 KB View Download
> 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.

Comment 4 by pdr@chromium.org, Oct 21 2016

Status: Available (was: Untriaged)
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...
Project Member

Comment 5 by sheriffbot@chromium.org, Oct 23 2017

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
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
Labels: -Hotlist-Recharge-Cold PaintTeamTriaged-20171023
Status: Available (was: Untriaged)
Summary: background-clip: text clips only first line of wrapping text (was: -webkit-background-clip: text clips only first line of wrapping text)
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.
Updated sample: https://jsfiddle.net/7qy68mc9/1/

And the attached screenshot suggests the issue is still present.
crbug658326-updated.PNG
562 KB View Download
Description: Show this description
Project Member

Comment 9 by bugdroid1@chromium.org, 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

Comment 10 by f...@opera.com, Jan 17 2018

Owner: f...@opera.com
Status: Fixed (was: Available)
Status: Verified (was: Fixed)
Confirm fixed on Version 65.0.3323.2 (Official Build) canary (64-bit)

Thank you Fredrik!

Sign in to add a comment