A test case would be nice.

You should reach out to the person on hacker news. :)

We haven't shipped backdrop-filter support yet so I think we can close this as it's working as intended.

Isn't it a potential bug in the pending implementation though?

This feature is under active development behind a flag, so we can probably merge it into 497522 or one of the blocking bugs attached to it. It is a potential bug, I'm just not sure we're at the stage of reaching out to individuals about bugs just yet.

I guess a test could look something like this: https://jsfiddle.net/dtzp0w39/2/ (notice the "fringing")

I don't think we should close this. It's a place where we're incompatible
with Safari. We need to make sure it works before shipping.

Re: #6: If the problems you're illustrating in that test are the black squares in the diagonal corners (I see this on my Linux box), those were caused by   http://crbug.com/612238 , fixed by danakj in  https://chromium.googlesource.com/chromium/src/+/a85bd24aa12d06f088ec083a01ceaf4ef54ead67. The result looks the same as Safari to me now.

If there's something else at play, let me know.

No, it's more like "smudging" or a vignette effect in the diagonal corners, so black is being sampled from "outside". Attaching a screenshot to avoid inadvertent misinterpretation.

Deleted: Screenshot from 2016-07-15 18-40-51.png 4.4 KB

	Screenshot from 2016-07-15 18-40-51.png 4.4 KB View Download

fs@: Thanks! Which platform was that on? I can't see it on Win, Mac or Linux.

That was on Linux, but it was also on an old (stable/51) Chrome. Mostly to show what it was I was observing. I did not see it in a more recent build, so it's quite possible it's a different effect of the same fix. Let me know if you want me to try a bisect. 

You are probably looking for a change made after 402973 (known bad), but no later than 402988 (first known good).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/c43e0bb044f911727bcb340753de1fe03514a2ff..7386c581f1a62b85a1bd1d0224d0414a7dad0d9f

So I guess https://chromium.googlesource.com/chromium/src/+/ca9b612516efc2af1143c09a4d67f5b99e566c79 might've been what caused the change in behvaior.

What's the status of this?

The way the effect expands under the box-shadow makes this unusable in its current form (on Canary). Here is a test case:

https://codepen.io/bkemper/pen/ybXQeV

Negative text-indent also extends the effect out to where the text begins (outside the box). So does other content (like a positioned ::before) that is outside the box. Not good. The backdrop filter effect should be limited to being within the edges of the box itself, like it is in Safari.

Could you attach a screen shot of the result you get from comment #17. I don't think I'm seeing the same thing on M-59.

And what platform are you using?

The NextAction date has arrived: 2017-05-15

Closing due to a lack of feedback. Reopen with feedback if you would like us to move forward.

Here is my CodePen example, in Google Chrome on the Mac, Version 59.0.3071.61 (Official Build) beta (64-bit).

You can see the negative text-indent, which puts the word "text" on to the left edge of the window (even though the div is smaller and centered in the window), also extends the blur out that far too. You can also see the redish box-shadow extends the blur out to its edges too. And you can see that the absolutely positioned yellow square is also causing the blur to extend above the div. None of those things should be happening, and don't happen in Safari. The blur should be limited to the background painting area (as defined in css3-background).

Deleted: backdrop-flter bug.png 299 KB

	backdrop-flter bug.png 299 KB View Download

I don't know how to re-open this, but it should be re-opened.

I was having this issue as well (Outside sampling, evidenced by this screenshot). Also I got artifacting on Windows 10 CU (I dont have this on Linux). Also attatched: dxdiag results

Deleted: bleed adn windows glitch.png 78.5 KB

	bleed adn windows glitch.png 78.5 KB View Download

Deleted: axax.png 21.3 KB

	axax.png 21.3 KB View Download

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

I don’t know what “Available” means here, but this is a really bad bug that needs to be fixed, as it has an extremely bad effect in a very common situation. 

#30 - it means the issue is available for anyone that wants to work on it.

While it might be a bad bug, this is an experimental feature that is not enabled by default, which lowers its priority and urgency considerably.

Before enabling this by default and shipping this (if that ever happens :(), I guess this will be fixed.

@ #30 If you want to see this the best way to encourage it along is probably to Star https://bugs.chromium.org/p/chromium/issues/detail?id=497522 since that is gaining momentum on this issue.

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

The vast majority of this bug is now fixed. The effect is almost entirely limited to the intended rectangle now.

However, on https://codepen.io/bkemper/pen/ybXQeV, with the above patch applied, the filtered region is still improperly clipped around the drop shadow. And this effect gets worse/different if you increase the page scale to 200% and size the window as shown in the attached screenshot. The filtered region moves down and to the right.

I will leave this bug open until that problem is also fixed.

Deleted: Screenshot_zoom_200.png 258 KB

	Screenshot_zoom_200.png 258 KB View Download