New issue
Advanced search Search tips

Issue 813796 link

Starred by 11 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 20
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Bug-Regression

Blocking:
issue 497522



Sign in to add a comment

backdrop-filter blur isn't correctly applied

Reported by b...@stripe.com, Feb 20 2018

Issue description

Chrome Version       : 64.0.3282.167
OS Version: OS X 10.13.3
URLs (if applicable) : https://stripe.com/environment
Other browsers tested:
  Add OK or FAIL after other browsers where you have tested this issue:
     Safari: OK
    Firefox:
    IE/Edge:

What steps will reproduce the problem?
1. Enable the "Experimental Web Platform features" flag
2. Go to https://stripe.com/environment
3. Look at the dark box in the header

What is the expected result?
The backdrop-filter blur should blur what's behind the dark box.

What happens instead of that?
The backdrop-filter blur isn't correctly applied. It incorrectly takes into account both the box-shadow and the icon, resulting in a blur applied outside the dark box.

Please provide any additional information below. Attach a screenshot if
possible.

UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36



 
screenshot.jpg
139 KB View Download
Labels: Needs-Triage-M64
Components: UI>Browser
Labels: -Type-Bug -Pri-3 hasbisect-per-revision RegressedIn-62 Triaged-ET M-66 Target-65 FoundIn-66 Target-66 FoundIn-64 FoundIn-65 Target-64 Pri-1 Type-Bug-Regression
Owner: shrike@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on mac 10.13.3 using chrome reported version #64.0.3282.167 and latest canary #66.0.3350.0. Issue is not seen in mac 10.12.6, OS-win and OS-linux.

Bisect Information:
=====================
Good build: 62.0.3167.0
Bad Build : 62.0.3168.0

Change Log URL: 
https://chromium.googlesource.com/chromium/src/+log/673687e665a84a8006943292a4da51a47ba5c672..255a96883ec1cb264854b04c31cd430a0942a6b7

From the above change log suspecting below change
Change-Id: I574b0382be70069ad509190011969d9cae054f9a
Reviewed-on: https://chromium-review.googlesource.com/584863

shrike@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Thanks...!!
Components: -UI>Browser Blink>CSS
Labels: -Pri-1 Pri-2
Owner: ----
Status: Untriaged (was: Assigned)
mac triage: This is a CSS bug and not caused by shrike's change. Marking for CSS team triage.

Comment 4 by e...@chromium.org, Feb 22 2018

Components: -Blink>CSS Blink>Compositing
Blocking: 497522
Labels: -Pri-2 Pri-3
This is an unlaunched feature.
This may be an "unlaunched feature" (on Chrome, Edge already has it), but as the earlier note on 497522 from chrishtr@ says, if you want it implemented you need to star that one to draw attention to it. (Tell your friends, let's help make this happen!)

Comment 7 by b...@stripe.com, Feb 26 2018

chrishtr@ - isn't it the entire purpose of flags to test new features and report bugs before they ship?
Cc: senorblanco@chromium.org
Components: -Blink>Compositing Internals>Compositing
Backdrop-filter is handled in the compositor.

Comment 9 by piman@chromium.org, Feb 26 2018

Cc: -senorblanco@chromium.org
Owner: senorblanco@chromium.org
Status: Assigned (was: Untriaged)
Re comment 7: yes that is one purpose of these flags. I am simply mentioning
that the not-launched-ness is a reason for downgrading to priority 3.
I would like to add that the provided example https://stripe.com/environment also shows another detail of this issue: when you resize the browser window, the element with the backdrop-filter shows white flickering.
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

Owner: masonfreed@chromium.org
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

Status: Fixed (was: Assigned)
Verified fixed on https://stripe.com/environment.

Sign in to add a comment