New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 767997 link

Starred by 14 users
Status: Fixed
Owner:
masonfreed@chromium.org
Closed: Dec 20
Cc:
█ sc00335...@techmahindra.com
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug

Blocking:
issue 497522



Sign in to add a comment

backdrop-filter does not respect parent boundaries

Reported by christop...@gmail.com, Sep 22 2017 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce the problem:
1. Visit this pen: https://codepen.io/anon/pen/pWEQRX
2. Hover over the 'menu' in the header
3. Notice that the filter extends to the height of the menu rather than being bound by the element it's applied on

What is the expected behavior?
backdrop-filter should not extend beyond the bounds of the element it is applied on. Opening in Safari will show that this does not repro.

What went wrong?
The backdrop-filter extends outside the element boundary.

Did this work before? No 

Chrome version: 60.0.3112.113  Channel: n/a
OS Version: OS X 10.12.6
Flash Version: Shockwave Flash 27.0 r0

Does not repro in Safari; works as expected.

Comment 1 by lgrey@chromium.org, Sep 22 2017

Components: Blink>CSS

Comment 2 by manoranj...@chromium.org, Sep 22 2017

Labels: Needs-Bisect Needs-Triage-M61

Comment 3 by sc00335...@techmahindra.com, Sep 25 2017

Cc: sc00335...@techmahindra.com
Labels: Triaged-ET Needs-Feedback
Unable to reproduce this issue on 60.0.3112.113 , latest stable 61.0.3169.100 and on latest canary 63.0.3222.0 using Macbook Air 10.12.6 with steps mentione below.

1.Launched chrome and navigated to https://codepen.io/anon/pen/pWEQRX
2.Hovered on 'menu' in the header and observed no extension of backdrop-filter. Attaching screenshot of same.

NOTE: Observing same behaviour in M50 chrome[50.0.2166.0], Safari and Firefox.

@Reporter: Could you please find the attached screenshot and let us know the expected behavior 

Thanks in advance!!
Issue 767997.png
838 KB View Download

Comment 4 by christop...@gmail.com, Sep 25 2017 

From the look of your screenshot, backdrop filter is not being applied at all; can you turn on the experimental web platform flag in chrome to see this repro? I just pulled it up again and was able to repro. 

See screen shots showing backdrop filter applied and working, and another on hover.
backdrop-filter-applied.png
3.8 MB View Download
backdrop-filter-hover.png
1.8 MB View Download
Project Member

Comment 5 by sheriffbot@chromium.org, Sep 25 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "sc00335628@techmahindra.com" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by sc00335...@techmahindra.com, Sep 26 2017

Labels: -Needs-Bisect M-63 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce this issue on 60.0.3112.113  and on latest canary 63.0.3223.8 using Windows 10,Ubuntu 14.04 and Mac 10.12.6 using steps mentioned below.

1.Launched chrome and enabled Experimental web platform features flag from chrome://flags.
2.Now navigated to https://codepen.io/anon/pen/pWEQRX , hovered on Menu link and observed extension of filter till the menu end.

This issue is seen from M50 [50.0.2166.0] . Hence considering this issue as Non-regression and marking as Untriaged for further inputs.

Thanks!

Comment 7 by rjwright@chromium.org, Oct 3 2017

Status: Available (was: Untriaged)

Comment 8 by rjwright@chromium.org, Oct 3 2017

Blocking: 497522

Comment 9 by rjwright@chromium.org, Oct 3 2017

Labels: Update-Quarterly

Comment 10 by nainar@chromium.org, Oct 30 2017

Labels: Hotlist-Interop

Comment 11 by rjwright@chromium.org, Oct 31 2017

Labels: Hotlist-GoodFirstBug
Putting this in Hotlist-GoodFirstBug. It may be difficult, but it may be very straight-forward. The problem is obvious & there's a good test case.

Comment 12 by hanlee....@gmail.com, Nov 4 2017 

I shall try to check this issue.

Comment 13 by nainar@chromium.org, Dec 6 2017

Labels: -Update-Quarterly

Comment 14 by futhark@chromium.org, Mar 13 2018

Components: -Blink>CSS Blink>Paint
Project Member

Comment 15 by bugdroid1@chromium.org, Nov 15 

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

commit 01e30939a4710efa881c05fe91097c9596a8251a
Author: Mason Freed <masonfreed@chromium.org>
Date: Thu Nov 15 22:05:41 2018

Adding more layout/WPT tests for backdrop-filter

These should reproduce (at least) these issues:
 - https://crbug.com/622128 - dark areas brought in from edges
 -  https://crbug.com/632979  - dark areas brought in from edges
 -  https://crbug.com/659501  - menus cause too much filtering
 -  https://crbug.com/767997  - menus cause too much filtering
 -  https://crbug.com/813796  - incorrect border used for filter
 -  https://crbug.com/593307  - incorrect border used for filter

Bug: 497522,622128, 632979 , 659501 , 767997 , 813796 , 593307 
Change-Id: Iafea2fc8fffba950f74d27f21170df647dc62e29
Reviewed-on: https://chromium-review.googlesource.com/c/1330888
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608537}
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-basic-blur.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-plus-filter-expected.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-plus-filter.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-background-color.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-opacity.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-border-radius.html
[add] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-clip-rect-ref.html
[add] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-clip-rect.html
[add] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-edge-pixels-ref.html
[add] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-edge-pixels.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html
[modify] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation.html
[add] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-paint-order-ref.html
[add] https://crrev.com/01e30939a4710efa881c05fe91097c9596a8251a/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-paint-order.html

Comment 16 by masonfreed@chromium.org, Dec 14

Owner: masonfreed@chromium.org
Here's another great example of the border box problem:

https://www.apple.com/shop/mac/mac-accessories/displays-mounts?page=1&fh=4593%2B45df
Screen Shot 2018-12-14 at 8.59.49 AM.png
1.3 MB View Download

Comment 17 by masonfreed@chromium.org, Dec 14

Status: Assigned (was: Available)
Project Member

Comment 18 by bugdroid1@chromium.org, Dec 20 

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

commit 7302ffc9033efd17c918645fc22d9189fbfd82a3
Author: Mason Freed <masonfreed@chromium.org>
Date: Thu Dec 20 22:35:18 2018

Plumbing border box through to viz, and adding clip rect to backdrop-filter

With this CL, the border box of the element containing backdrop-filter
is plumbed through to viz, so that the backdrop-filter effect can be
properly clipped at the border box of the element itself. This will keep
it from "bleeding" outside to the border rect of the entire layer (including
children).

This should fix most of the reported bugs related to the filtered effect
extending beyond the proper bounds.

Bug: 497522,  813796 ,  767997 ,  659501 ,  632979 , 618913,  593307 
Change-Id: I5f24ac79053b3779cea128aacabd60f9d66702f4
Reviewed-on: https://chromium-review.googlesource.com/c/1378811
Reviewed-by: Michael Wasserman <msw@chromium.org>
Reviewed-by: danakj <danakj@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Kinuko Yasuda <kinuko@chromium.org>
Reviewed-by: vmpstr <vmpstr@chromium.org>
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618358}
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/layers/layer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/layers/layer.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/layers/layer_impl_test_properties.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/layers/render_surface_impl.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/layers/render_surface_impl.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/paint/filter_operation.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/trees/effect_node.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/trees/effect_node.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/trees/layer_tree_host_pixeltest_blending.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/trees/layer_tree_host_pixeltest_filters.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/trees/layer_tree_host_pixeltest_masks.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/cc/trees/property_tree_builder.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/common/quads/render_pass.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/common/quads/render_pass.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/common/quads/render_pass_unittest.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/direct_renderer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/direct_renderer.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/gl_renderer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/gl_renderer.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/renderer_pixeltest.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/skia_renderer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/software_renderer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/components/viz/service/display/surface_aggregator.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/services/viz/public/cpp/compositing/render_pass_struct_traits.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/services/viz/public/cpp/compositing/render_pass_struct_traits.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/services/viz/public/cpp/compositing/struct_traits_perftest.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/services/viz/public/cpp/compositing/struct_traits_unittest.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/services/viz/public/interfaces/compositing/render_pass.mojom
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/core/layout/layout_box.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/core/paint/compositing/composited_layer_mapping.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/core/paint/paint_layer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/core/paint/paint_layer.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/core/paint/paint_property_tree_builder.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/compositing/chunk_to_layer_mapper_test.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/compositing/property_tree_manager.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/graphics_layer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/graphics_layer.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/paint/effect_paint_property_node.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/skia/skia_utils.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/renderer/platform/graphics/skia/skia_utils.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/web_tests/TestExpectations
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-clip-rect-ref.html
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-clip-rect.html
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/ui/compositor/layer.cc
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/ui/compositor/layer.h
[modify] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/ui/compositor/layer_unittest.cc
[add] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/ui/gfx/test/data/compositor/BackgroundBlur1.png
[add] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/ui/gfx/test/data/compositor/BackgroundBlur1_zoom.png
[add] https://crrev.com/7302ffc9033efd17c918645fc22d9189fbfd82a3/ui/gfx/test/data/compositor/BackgroundBlur2.png
►

Sign in to add a comment