New issue
Advanced search Search tips

Issue 593307 link

Starred by 8 users
Status: Fixed
Owner:
masonfreed@chromium.org
Closed: Dec 20
Cc:
vmi...@chromium.org
enne@chromium.org
chrishtr@chromium.org
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug

Blocking:
issue 497522



Sign in to add a comment

backdrop-filter on div with translate gives unexpected look

Reported by samyalza...@gmail.com, Mar 9 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Steps to reproduce the problem:
1. enable web platform features
2. visit http://jsbin.com/muwajorilu/edit?output
3. 

What is the expected behavior?
backdrop-filter should be bound the the layer boundary and border-radius 

What went wrong?
the backdrop effect goes beyond the div boundaries including the area of the box shadow (webkit does not have this issue)
also, disregards the border-radius (webkit has same issue)

Did this work before? N/A 

Chrome version: 49.0.2623.87  Channel: stable
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 20.0 r0

Safari suffers from a similar issue

Comment 1 by erikc...@chromium.org, Mar 15 2016

Components: -UI Blink>UI

Comment 2 Deleted

Comment 3 by tkent@chromium.org, Mar 23 2016

Components: -Blink Blink>Paint

Comment 4 by f...@opera.com, Mar 23 2016

Components: Blink>CSS>Filters

Comment 5 by chrishtr@chromium.org, Mar 23 2016

Owner: jaydasika@chromium.org
Status: Assigned (was: Unconfirmed)

Comment 6 by jaydasika@chromium.org, Oct 11 2016

Blocking: 497522

Comment 7 by suzyh@chromium.org, Apr 5 2017

Components: -Blink>CSS>Filters Blink>Compositing>Filters

Comment 8 by jaydasika@chromium.org, May 13 2017

Cc: vmi...@chromium.org enne@chromium.org
Owner: ----
Status: Available (was: Assigned)

Comment 9 by christop...@gmail.com, Sep 22 2017 

Any update on this bug? I have a fixed height div with a collapsed menu absolutely positioned inside it. When the menu is opened, the blur effect extends beyond the height of the parent container, and extends to the height of that menu. Safari's implementation appears to be correct and is not showing this behavior. This seems unrelated to the translate prop and more of a general bug where the backdrop-filter effect extends beyond its boundaries.
Project Member

Comment 10 by sheriffbot@chromium.org, Sep 24

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.

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

Comment 11 by enne@chromium.org, Sep 24

Cc: chrishtr@chromium.org
Status: Available (was: Untriaged)
Project Member

Comment 12 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 13 by masonfreed@chromium.org, Dec 14

Owner: masonfreed@chromium.org
Status: Assigned (was: Available)
Project Member

Comment 14 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

Comment 15 by masonfreed@chromium.org, Dec 20

Status: Fixed (was: Assigned)
The box shadow part of this bug is fixed with the above patch.

The border radius is still not as expected, but that problem is being tracked explicitly in https://crbug.com/547937. So I am going to close this one as fixed.
►

Sign in to add a comment