New issue
Advanced search Search tips

Issue 701654 link

Starred by 3 users
Status: WontFix
Owner:
chrishtr@chromium.org
Closed: Mar 2017
Cc:
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 1
Type: Bug-Regression



Sign in to add a comment

CSS filter: drop-shadow renders with clipped shadow on SVGs with tight bounds

Reported by gawd...@gmail.com, Mar 15 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Steps to reproduce the problem:
1. Create an SVG with extremely tight bounds (very little space between the edges of the viewbox and the actual content)
2. Apply a CSS drop-shadow filter (like `filter: drop-shadow(0 3px 4px #333)`)

What is the expected behavior?
The drop shadow should extend outside the bounds of the SVG

What went wrong?
The drop shadow gets clipped by the bounds of the SVG, as if it were a part of the SVG itself.
This is visible on the very left edge of the first D, and the "JS" in the example.

Did this work before? Yes 56

Does this work in other browsers? Yes

Chrome version: 57.0.2987.98  Channel: stable
OS Version: 10.0
Flash Version: 

Both Firefox and Edge appear to render it correctly, as did Chrome/Chromium prior to version 57.
chrome-56.png
64.2 KB View Download
chrome-57.png
61.0 KB View Download
test.html
8.4 KB View Download

Comment 1 by gawd...@gmail.com, Mar 15 2017 

Forgot to mention, the screenshots are of https://discord.js.org/

Comment 2 by f...@opera.com, Mar 15 2017

Labels: -OS-Windows
Owner: chrishtr@chromium.org
Status: Assigned (was: Unconfirmed)
Bisected:

You are probably looking for a change made after 443803 (known good), but no later than 443804 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/c1f4d0f3790af6f5f3e24d0c0d6092f6525ddd5a..4180b2e34325e450db3d4feb3c09b58ced38e98a

(That range is a single commit: 4180b2e34325e450db3d4feb3c09b58ced38e98a)

Comment 3 by schenney@chromium.org, Mar 15 2017

Labels: -Pri-2 RegressionReachedStable RegressionFound-57 Regressed-57 Pri-1
This is a regression that reached stable.

Comment 4 by chrishtr@chromium.org, Mar 16 2017

Status: WontFix (was: Assigned)
This is working as intended. See  issue 231577 , when a change was made to make
Chrome's behavior always clip to the specified bounds of the root <svg> element,
unless overflow: visible is specified on it. I verified that https://discord.js.org/ is fixed by that change.

The reason this site started clipping is that we fixed a bug in Chrome where
we should have been clipping in this case, but were not.
Project Member

Comment 5 by bugdroid1@chromium.org, Mar 30 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d92200ae8377ef1deeee84401f0ac5352c5e7b64

commit d92200ae8377ef1deeee84401f0ac5352c5e7b64
Author: chrishtr <chrishtr@chromium.org>
Date: Thu Mar 30 02:58:06 2017

Clarify comments regarding overflow in svg.css

BUG= 701654 

Review-Url: https://codereview.chromium.org/2782643004
Cr-Commit-Position: refs/heads/master@{#460632}

[modify] https://crrev.com/d92200ae8377ef1deeee84401f0ac5352c5e7b64/third_party/WebKit/Source/core/css/svg.css
Project Member

Comment 6 by bugdroid1@chromium.org, Mar 31 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9dde8ce672f222dc77bd460ac703a2bef6910bc7

commit 9dde8ce672f222dc77bd460ac703a2bef6910bc7
Author: chrishtr <chrishtr@chromium.org>
Date: Fri Mar 31 03:33:32 2017

Account for filter bounds for backgroundRect during PaintLayer painting.

BUG= 701654 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2781863005
Cr-Commit-Position: refs/heads/master@{#461014}

[modify] https://crrev.com/9dde8ce672f222dc77bd460ac703a2bef6910bc7/third_party/WebKit/LayoutTests/TestExpectations
[delete] https://crrev.com/904a97549b34407f69820f1ff114c861f9c35bf6/third_party/WebKit/LayoutTests/fast/clip/nested-rounded-rect-expected.html
[add] https://crrev.com/9dde8ce672f222dc77bd460ac703a2bef6910bc7/third_party/WebKit/LayoutTests/fast/clip/nested-rounded-rect-expected.png
[add] https://crrev.com/9dde8ce672f222dc77bd460ac703a2bef6910bc7/third_party/WebKit/LayoutTests/fast/clip/nested-rounded-rect-expected.txt
[modify] https://crrev.com/9dde8ce672f222dc77bd460ac703a2bef6910bc7/third_party/WebKit/Source/core/paint/PaintLayerClipper.cpp
[modify] https://crrev.com/9dde8ce672f222dc77bd460ac703a2bef6910bc7/third_party/WebKit/Source/core/paint/PaintLayerClipper.h
[modify] https://crrev.com/9dde8ce672f222dc77bd460ac703a2bef6910bc7/third_party/WebKit/Source/core/paint/PaintLayerClipperTest.cpp
Project Member

Comment 7 by bugdroid1@chromium.org, Mar 31 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b8f96fd9f682ecff482e6eb53277e0471ca7ae96

commit b8f96fd9f682ecff482e6eb53277e0471ca7ae96
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Fri Mar 31 05:23:02 2017

Auto-rebaseline for r461014

Build: https://build.chromium.org/p/chromium.infra.cron/builders/rebaseline-o-matic/builds/648582

https://chromium.googlesource.com/chromium/src/+/9dde8ce672f22

BUG= 701654 
TBR=chrishtr@chromium.org

Review-Url: https://codereview.chromium.org/2786333002 .
Cr-Commit-Position: refs/heads/master@{#461048}

[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/linux/fast/css/resize-corner-tracking-transformed-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/linux/fast/forms/placeholder-position-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/mac-mac10.10/fast/forms/placeholder-position-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/mac-mac10.11/fast/forms/placeholder-position-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/forms/placeholder-position-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/mac-retina/fast/forms/placeholder-position-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/mac/fast/css/resize-corner-tracking-transformed-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/win/fast/css/resize-corner-tracking-transformed-expected.png
[modify] https://crrev.com/b8f96fd9f682ecff482e6eb53277e0471ca7ae96/third_party/WebKit/LayoutTests/platform/win/fast/forms/placeholder-position-expected.png
►

Sign in to add a comment