New issue
Advanced search Search tips

Issue 659501 link

Starred by 8 users
Status: Fixed
Merged: issue 622128
Owner:
masonfreed@chromium.org
Closed: Dec 20
Cc:
vmi...@chromium.org
wutao@chromium.org
nyerramilli@chromium.org
enne@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug-Regression
nee

Blocking:
issue 497522



Sign in to add a comment

Regression:Weird patches is observed on hovering over header in https://support.apple.com

Reported by dmascare...@etouch.net, Oct 26 2016 
Chrome Version:55.0.2883.28 eec10a413008022b45380e6d0b44a1ac0b2ea414-refs/branch-heads/2883@{#305}
OS: Windows (7,8,10), Linux (14.04 LTS), Mac (10.10.5, 10.11.4)

Precondition: Enable 'Experimental Web Platform features' flag from chrome://flags.

What steps will reproduce the problem?
1. Launch chrome and navigate to https://support.apple.com/en-in/HT201236.
2. Hover over header and observe.

Actual: Weird patches is observed on hovering over header.
Expected: Patches should not be seen.

This is regression issue, broken in 'M 47' and below is narrow bisect:
https://chromium.googlesource.com/chromium/src/+log/d3ba0f047b9dca852613fdfba69345de7312fc95..f3ee7c446fbd89b311b32397b0f4eb7d5e98e4fc?pretty=fuller&n=100

Blink CL:
https://chromium.googlesource.com/chromium/blink/+log/aaebe24..c692a2f?pretty=fuller&n=100

Suspecting: 201314

Good build:47.0.2495.0
Bad build:47.0.2496.0
Actual.mp4
1.1 MB View Download
patches.png
23.9 KB View Download

Comment 1 by hendr...@chromium.org, Oct 26 2016

Owner: senorblanco@chromium.org
I don't work on chrome anymore, reassigning.

@senorblanco, they must be using backdrop filters on their site. It would be interesting to see what this looks like in safari. Can you find the appropriate person to look at this?

Comment 2 by kavvaru@chromium.org, Oct 31 2016 

Still able to reproduce the issue on Mac 10.11.6 using chrome latest version 56.0.2905.0.

senorblanco@ Could you please look into this issue

Comment 3 by chrishtr@chromium.org, Nov 2 2016

Owner: jaydasika@chromium.org

Comment 4 by chrishtr@chromium.org, Nov 2 2016

Blocking: 497522
Labels: nee

Comment 5 by tkonch...@chromium.org, Nov 17 2016 

Still able to reproduce the issue on Mac 10.11.6 using chrome latest version 56.0.2923.0

jaydasika@, Could you please take a look

Comment 6 by tkonch...@chromium.org, Nov 25 2016 

friendly Ping!!

jaydasika@, Could you please take a look

Comment 7 by krajshree@chromium.org, Jan 10 2017 

Just to update, still able to reproduce this issue on Win-10 using latest canary #57.0.2976.5.

jaydasika@ - Gentle Ping...!!

Could you please have a look into this issue.

Thanks...!!

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

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

Comment 9 by schenney@chromium.org, May 15 2017

Components: -Blink>Paint Blink>Compositing>Filters
Mergedinto: 622128
Status: Duplicate (was: Available)
Summary: Regression:Weird patches is observed on hovering over header in https://support.apple.com (was: Regression:Weird patches is observed on hovering over header in https://support.apple.com')
Note that Experimental Web Platform Features does need to be enabled. And I have confirmed that background-filter is to blame.

The issue appears to be in the CC compositor. Blink is creating a layer for an opacity animation that is 57 pixels wide, but when that layer is ultimately drawn it produces rendering artifacts about 150 pixels wide due to the blur on the background filter. Adjusting the blur radius adjusts the size of the artifact.

I'm pretty sure this is crbug.com/622128, the cursed bug.

Comment 10 by schenney@chromium.org, May 15 2017

Cc: -tkonch...@chromium.org

Comment 11 by wutao@chromium.org, Jul 25 2017

Cc: wutao@chromium.org
Status: Available (was: Duplicate)
Reopen this.
There is a new clamp mode in skia blur to not read 0 outside the image, see bug 622128.

Please use the new skia code where the Web Platform needed.

Comment 12 by schenney@chromium.org, Oct 4 2017 

 Issue 771348  has been merged into this issue.

Comment 13 by schenney@chromium.org, Oct 4 2017

Owner: fmalita@chromium.org
Status: Assigned (was: Available)
fmalita@, could you look into using the new skia method? It still may be that this bug is not fixed by it, but at least we should try.
Project Member

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

Owner: masonfreed@chromium.org
Project Member

Comment 16 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 17 by masonfreed@chromium.org, Dec 20

Status: Fixed (was: Assigned)
Apple seems to have changed their header, such that this no longer reproduces, even before the border box CL. But the problem described is almost surely related to the border box clipping behavior, which should now be fixed. I'm therefore closing this as fixed.
►

Sign in to add a comment