CSS background-clip doesn't show background for elements set to display: table
Reported by
oliver.a...@gmail.com,
Sep 5
|
||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36 Steps to reproduce the problem: 1. Create a html element with the following CSS declarations `background: -webkit-linear-gradient(0deg, black, white); -webkit-background-clip: text; -webkit-text-fill-color: transparent` 2. Add a declaration of `display: table` to the html element What is the expected behavior? For the background to show, clipped to the outline of the text What went wrong? The text becomes transparent, but the background doesn't show Did this work before? Yes Chrome 68 Does this work in other browsers? No Same behaviour in Edge and other webkit browsers Chrome version: 69.0.3497.81 Channel: stable OS Version: 10.0 Flash Version: This seems to be a rendering issue. The `background-clip` deceleration works with `display: inline-block` and `display: block` but not with `display: table`
,
Sep 6
,
Sep 6
Able to reproduce the issue on chrome reported version #69.0.3497.81 and latest canary #71.0.3543.0 using Mac 10.13.6, Windows-10 and Ubuntu 17.10. Note: As the issue got to break in branch builds, hence providing manual change-log from omahaproxy. Bisect Information: ===================== Good build: 69.0.3497.74 Bad build: 69.0.3497.75 Change Log: https://chromium.googlesource.com/chromium/src/+log/69.0.3497.74..69.0.3497.75?pretty=fuller&n=10000 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1197843 @ Xianzhu Wang - Please confirm the issue and help in re-assigning if it is not related to your change. Adding 'ReleaseBlock-Stable' label as this is a recent regression. Please feel free to remove if this is not applicable. Thanks...!!
,
Sep 6
background-clip is still an experimental feature, and what can contribute to clip is still in early proposal stage (https://drafts.csswg.org/css-backgrounds-4/#background-clip). Now we guarantee correct background-clip:text for direct inline contents, but not other kind of contents. We can revert to the old behavior in M70 though.
,
Sep 6
Clarification/correction to #c4: the statement was about "background-clip:text" only. Actually we officially shipped the feature, so we should keep the behavior consistent, though the spec is still in development and different browsers have different behaviors in some corner cases. Will still target 70.
,
Sep 6
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/9177956013985e9f783b66aca45ddba78efee413 commit 9177956013985e9f783b66aca45ddba78efee413 Author: Xianzhu Wang <wangxianzhu@chromium.org> Date: Thu Sep 06 21:37:11 2018 [PE] Support float, block, table descendants for background-clip:text In https://chromium-review.googlesource.com/c/chromium/src/+/1197462 we changed box_model_.Paint() to LineBoxListPainter so we no longer supported text clip for descendants other than inline contents. This CL calls ToLayoutBlock(box_model_).PaintObject() to support text clip of other descendants, and still avoid the original double paint offset issue of box_model_.Paint(). Bug: 880825 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I2c4b0e23df11bf300c01f9c804fb7e7d129f3aa0 Reviewed-on: https://chromium-review.googlesource.com/1211244 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#589314} [add] https://crrev.com/9177956013985e9f783b66aca45ddba78efee413/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants-expected.html [add] https://crrev.com/9177956013985e9f783b66aca45ddba78efee413/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants.html [modify] https://crrev.com/9177956013985e9f783b66aca45ddba78efee413/third_party/blink/renderer/core/paint/box_model_object_painter.cc
,
Sep 7
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6819be079703da122ed7469cd8221fe9dc96391d commit 6819be079703da122ed7469cd8221fe9dc96391d Author: Xianzhu Wang <wangxianzhu@chromium.org> Date: Fri Sep 07 05:51:32 2018 Revert "[PE] Support float, block, table descendants for background-clip:text" This reverts commit 9177956013985e9f783b66aca45ddba78efee413. Reason for revert: The layout object to paint text clip might not be LayoutBlock. Bug: 881644 Original change's description: > [PE] Support float, block, table descendants for background-clip:text > > In https://chromium-review.googlesource.com/c/chromium/src/+/1197462 > we changed box_model_.Paint() to LineBoxListPainter so we no longer > supported text clip for descendants other than inline contents. > > This CL calls ToLayoutBlock(box_model_).PaintObject() to support text > clip of other descendants, and still avoid the original double paint > offset issue of box_model_.Paint(). > > Bug: 880825 > Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel > Change-Id: I2c4b0e23df11bf300c01f9c804fb7e7d129f3aa0 > Reviewed-on: https://chromium-review.googlesource.com/1211244 > Reviewed-by: Philip Rogers <pdr@chromium.org> > Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> > Cr-Commit-Position: refs/heads/master@{#589314} TBR=wangxianzhu@chromium.org,pdr@chromium.org Change-Id: Id26f9f690884300fceb4bdaf3e4f3fb2aad4fc04 No-Presubmit: true No-Tree-Checks: true No-Try: true Bug: 880825 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Reviewed-on: https://chromium-review.googlesource.com/1212483 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#589443} [delete] https://crrev.com/e7492cbb3c87c15a7a17b9d228a726a8e615131a/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants-expected.html [delete] https://crrev.com/e7492cbb3c87c15a7a17b9d228a726a8e615131a/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants.html [modify] https://crrev.com/6819be079703da122ed7469cd8221fe9dc96391d/third_party/blink/renderer/core/paint/box_model_object_painter.cc
,
Sep 7
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/cf181e265fae9a5e905dde6dbcb37fc4f9826298 commit cf181e265fae9a5e905dde6dbcb37fc4f9826298 Author: Xianzhu Wang <wangxianzhu@chromium.org> Date: Fri Sep 07 18:12:22 2018 Reland "[PE] Support float, block, table descendants for background-clip:text" This is a reland of 9177956013985e9f783b66aca45ddba78efee413 The original change was reverted in https://chromium-review.googlesource.com/c/chromium/src/+/1212483 because of crbug.com/881644 . This reland CL fixes the bug by ignoring objects other than LayoutInline and LayoutBlock when painting text clip mask. Original change's description: > [PE] Support float, block, table descendants for background-clip:text > > In https://chromium-review.googlesource.com/c/chromium/src/+/1197462 > we changed box_model_.Paint() to LineBoxListPainter so we no longer > supported text clip for descendants other than inline contents. > > This CL calls ToLayoutBlock(box_model_).PaintObject() to support text > clip of other descendants, and still avoid the original double paint > offset issue of box_model_.Paint(). > > Bug: 880825 > Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel > Change-Id: I2c4b0e23df11bf300c01f9c804fb7e7d129f3aa0 > Reviewed-on: https://chromium-review.googlesource.com/1211244 > Reviewed-by: Philip Rogers <pdr@chromium.org> > Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> > Cr-Commit-Position: refs/heads/master@{#589314} Bug: 880825 Change-Id: I0d51678f07422743c952e20a880b257a830157c4 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Reviewed-on: https://chromium-review.googlesource.com/1213371 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#589584} [add] https://crrev.com/cf181e265fae9a5e905dde6dbcb37fc4f9826298/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants-expected.html [add] https://crrev.com/cf181e265fae9a5e905dde6dbcb37fc4f9826298/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants.html [add] https://crrev.com/cf181e265fae9a5e905dde6dbcb37fc4f9826298/third_party/WebKit/LayoutTests/paint/background/background-clip-text-img-crash.html [modify] https://crrev.com/cf181e265fae9a5e905dde6dbcb37fc4f9826298/third_party/blink/renderer/core/paint/box_model_object_painter.cc
,
Sep 10
Issue 882087 has been merged into this issue.
,
Sep 10
A workaround of this bug is like the following (similar to the workaround in bug 882087 , but this one is for table): Original: <table style="-webkit-background-clip: text; background: linear-gradient...; color: transparent"> <tr><td>Some text</td></tr> </table> Workaround: <table> <tr><td style="-webkit-background-clip: text; background: linear-gradient...; color: transparent">Some text</td></tr> </table> That is, move the background clip related css properties down to the direct containing element of the text. It works because the background clip is guaranteed to work on direct inline contents. This also ensures that the case works on Safari, and will work in all browsers after the feature is standardized (which may be different from the current chrome implementation) and every browser implements the same standard.
,
Sep 10
Request to merge https://chromium-review.googlesource.com/1213371 into M70. Verified on Canary 71.0.3548.0.
,
Sep 10
This bug requires manual review: Reverts referenced in bugdroid comments after merge request. Please contact the milestone owner if you have questions. Owners: benmason@(Android), kariahda@(iOS), geohsu@(ChromeOS), abdulsyed@(Desktop) For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 10
Approved - branch:3538
,
Sep 10
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/910a64572620c9672f9d801295618eecce9f7807 commit 910a64572620c9672f9d801295618eecce9f7807 Author: Xianzhu Wang <wangxianzhu@chromium.org> Date: Mon Sep 10 18:57:01 2018 Reland "[PE] Support float, block, table descendants for background-clip:text" This is a reland of 9177956013985e9f783b66aca45ddba78efee413 The original change was reverted in https://chromium-review.googlesource.com/c/chromium/src/+/1212483 because of crbug.com/881644 . This reland CL fixes the bug by ignoring objects other than LayoutInline and LayoutBlock when painting text clip mask. Original change's description: > [PE] Support float, block, table descendants for background-clip:text > > In https://chromium-review.googlesource.com/c/chromium/src/+/1197462 > we changed box_model_.Paint() to LineBoxListPainter so we no longer > supported text clip for descendants other than inline contents. > > This CL calls ToLayoutBlock(box_model_).PaintObject() to support text > clip of other descendants, and still avoid the original double paint > offset issue of box_model_.Paint(). > > Bug: 880825 > Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel > Change-Id: I2c4b0e23df11bf300c01f9c804fb7e7d129f3aa0 > Reviewed-on: https://chromium-review.googlesource.com/1211244 > Reviewed-by: Philip Rogers <pdr@chromium.org> > Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> > Cr-Commit-Position: refs/heads/master@{#589314} TBR=wangxianzhu@chromium.org (cherry picked from commit cf181e265fae9a5e905dde6dbcb37fc4f9826298) Bug: 880825 Change-Id: I0d51678f07422743c952e20a880b257a830157c4 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Reviewed-on: https://chromium-review.googlesource.com/1213371 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#589584} Reviewed-on: https://chromium-review.googlesource.com/1217125 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/branch-heads/3538@{#237} Cr-Branched-From: 79f7c91a2b2a2932cd447fa6f865cb6662fa8fa6-refs/heads/master@{#587811} [add] https://crrev.com/910a64572620c9672f9d801295618eecce9f7807/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants-expected.html [add] https://crrev.com/910a64572620c9672f9d801295618eecce9f7807/third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants.html [add] https://crrev.com/910a64572620c9672f9d801295618eecce9f7807/third_party/WebKit/LayoutTests/paint/background/background-clip-text-img-crash.html [modify] https://crrev.com/910a64572620c9672f9d801295618eecce9f7807/third_party/blink/renderer/core/paint/box_model_object_painter.cc
,
Sep 10
,
Sep 12
Issue 883198 has been merged into this issue.
,
Sep 13
Issue 883627 has been merged into this issue.
,
Sep 20
|
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by gov...@chromium.org
, Sep 5