New issue
Advanced search Search tips

Issue 745012 link

Starred by 5 users
Status: Assigned
Owner:
masonfreed@chromium.org
Cc:
masonfreed@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocking:
issue 497522



Sign in to add a comment

backdrop-filter blur() introduces white boundary at edges

Project Member Reported by senorblanco@chromium.org, Jul 17 2017 
Open attached file in Chrome with --enable-experimental-web-platform-features.

Note that each sample (with progressively more blur) seems to introduce white/grey pixels at the edge, and the 48px blur sample is a light gray.

In Safari, no edge artifacts are visible, and the 48px blur sample is closer to the average of the input pixels.

(Note: substitute -webkit-backdrop-filter for backdrop-filter in Safari).
reference.png
3.4 KB View Download

Comment 1 by senorblanco@chromium.org, Jul 17 2017 

Whoops, forgot the HTML file.
backdrop-filter-blur.html
671 bytes View Download

Comment 2 by senorblanco@chromium.org, Jul 17 2017

Components: Blink>Compositing>Filters
Status: Available (was: Untriaged)

Comment 3 by senorblanco@chromium.org, Jul 19 2017 

Here's a related issue, where a red border bleeds into the backdrop-filter. Safari doesn't do this; it seems to clamp the filter input to the bounds of the primitive.
backdrop-filter-bleeding.html
794 bytes View Download

Comment 4 Deleted

Project Member

Comment 5 by sheriffbot@chromium.org, Oct 30

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 6 by schenney@chromium.org, Nov 5

Cc: masonfreed@chromium.org
Status: Available (was: Untriaged)

Comment 7 Deleted

Comment 8 by masonfreed@chromium.org, Nov 5

Blocking: -667551 497522
Thanks for the cc, schenney@. I hadn't seen this one.

senorblanco@, do you happen to have the red-border.png image somewhere? The backdrop-filter-blur.html uses reference.png, which is clearly from third_party/WebKit/LayoutTests/css3/filters/resources, but I can't find a red-border.png anywhere. I just want to make sure I'm seeing the same thing.
Project Member

Comment 9 by bugdroid1@chromium.org, Nov 13 

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

commit 91e518cb31819aba7ea704d09303fb3a80265c4e
Author: Mason Freed <masonfreed@chromium.org>
Date: Tue Nov 13 02:22:50 2018

Re-plumb backdrop-filter through blink-gen-property-trees

With this CL, backdrop-filter will continue to work when the
--enable-blink-gen-property-trees flag is enabled. Behavior should be
identical to behavior without the flag.

Also, I added a number of layout/WPT tests for backdrop-filter,
some of which currently pass, and some of which need fixing. The ones
that need fixing have been added to TestExpectations. These new tests
should reproduce (at least) these issues:
 - https://crbug.com/314867 - respecting isolation
 - https://crbug.com/525099 - respecting isolation
 - https://crbug.com/547937 - border radius
 - https://crbug.com/524689 - filter plus backdrop-filter
 - https://crbug.com/745012 - boundary effect problems

I also moved the existing tests out of external/wpt/css/css-filter
into external/wpt/css/filter-effects, where they really should be,
now that filter-effects is being pulled into the tree.

Bug: 497522,314867,525099,547937,524689,745012
Change-Id: I2be33fbc0e17dec2cd138f9796971fb4a9a57216
Reviewed-on: https://chromium-review.googlesource.com/c/1316661
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#607447}
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-basic-blur-expected.png
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-basic-blur.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-bleeding-expected.png
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-bleeding.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-boundary-expected.png
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-boundary.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-plus-filter-expected.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-plus-filter.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-svg-expected.png
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/css3/filters/backdrop-filter-svg.html
[delete] https://crrev.com/969924618ae3bd214b3d85bd16a0ef2fe70fa77d/third_party/WebKit/LayoutTests/external/wpt/css/css-filter/META.yml
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-background-color-ref.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-background-color.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-opacity-ref.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-opacity.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic-ref.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-basic.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-border-radius-ref.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-border-radius.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation-ref.html
[add] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/backdrop-filter-isolation.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/blur-clip-stacking-context-001.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/blur-clip-stacking-context-002.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/blur-clip-stacking-context-ref.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/filtered-block-is-container-ref.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/filtered-block-is-container.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/filtered-html-is-not-container-ref.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/filtered-html-is-not-container.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/filtered-inline-is-container-ref.html
[rename] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/WebKit/LayoutTests/external/wpt/css/filter-effects/filtered-inline-is-container.html
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/core/layout/layout_object.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/core/paint/paint_layer.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/core/paint/paint_layer.h
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/core/paint/paint_property_tree_builder.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/platform/graphics/compositing/chunk_to_layer_mapper_test.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/platform/graphics/compositing/property_tree_manager.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/platform/graphics/paint/effect_paint_property_node.cc
[modify] https://crrev.com/91e518cb31819aba7ea704d09303fb3a80265c4e/third_party/blink/renderer/platform/graphics/paint/effect_paint_property_node.h

Comment 10 by masonfreed@chromium.org, Dec 14

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

Sign in to add a comment