Bug 163497 - Dynamically-added backdrop filter to clip-path'd element with 3D transform renders incorrectly (without clip)
Summary: Dynamically-added backdrop filter to clip-path'd element with 3D transform re...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: mitz
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-10-16 03:16 PDT by Tim Horton
Modified: 2016-10-22 19:53 PDT (History)
3 users (show)

See Also:


Attachments
repro (1.34 KB, text/html)
2016-10-16 03:16 PDT, Tim Horton
no flags Details
wrong! (93.01 KB, image/png)
2016-10-16 03:16 PDT, Tim Horton
no flags Details
Ensure that the mask is updated (4.86 KB, patch)
2016-10-22 15:17 PDT, mitz
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews116 for mac-yosemite (1.80 MB, application/zip)
2016-10-22 16:24 PDT, Build Bot
no flags Details
Ensure that the mask is updated (3.93 KB, patch)
2016-10-22 16:52 PDT, mitz
simon.fraser: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Tim Horton 2016-10-16 03:16:14 PDT
Steps to Reproduce:

1. Open test case.

Expected: Blur should be clipped to the red circle.
Actual: It is not; the whole bounding box of the element is backdrop blurred.

Notes:
If #blur doesn't get a layer, everything is fine.
If the backdrop-filter is applied to #blur in the style instead of dynamically added after the fact, everything is fine.
This affects adding backdrop-filters via the inspector, too, of course (and made me think I was crazy for quite some time before realizing what was up).
Comment 1 Tim Horton 2016-10-16 03:16:30 PDT
Created attachment 291741 [details]
repro
Comment 2 Tim Horton 2016-10-16 03:16:49 PDT
Created attachment 291742 [details]
wrong!
Comment 3 mitz 2016-10-22 15:17:04 PDT
Created attachment 292513 [details]
Ensure that the mask is updated
Comment 4 Build Bot 2016-10-22 16:24:22 PDT
Comment on attachment 292513 [details]
Ensure that the mask is updated

Attachment 292513 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/2347099

New failing tests:
css3/filters/backdrop/dynamic-with-clip-path.html
Comment 5 Build Bot 2016-10-22 16:24:25 PDT
Created attachment 292517 [details]
Archive of layout-test-results from ews116 for mac-yosemite

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews116  Port: mac-yosemite  Platform: Mac OS X 10.10.5
Comment 6 mitz 2016-10-22 16:26:16 PDT
Not sure how to explain the (small) difference in results in Yosemite. Might be able to fix it by using something other than a blur for the backdrop filter.
Comment 7 mitz 2016-10-22 16:52:36 PDT
Created attachment 292520 [details]
Ensure that the mask is updated
Comment 8 Simon Fraser (smfr) 2016-10-22 19:02:33 PDT
Comment on attachment 292520 [details]
Ensure that the mask is updated

View in context: https://bugs.webkit.org/attachment.cgi?id=292520&action=review

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path-expected.html:13
> +            -webkit-transform: translatez(0);

No need for prefix.

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path.html:13
> +        -webkit-transform: translatez(0);

Ditto.
Comment 9 Simon Fraser (smfr) 2016-10-22 19:43:58 PDT
Comment on attachment 292520 [details]
Ensure that the mask is updated

View in context: https://bugs.webkit.org/attachment.cgi?id=292520&action=review

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path-expected.html:11
> +            position: absolute;
> +            width: 200px;

Weird indentation.

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path.html:23
> +        document.getElementById("filter").style.webkitBackdropFilter = "invert()";

I slightly prefer putting the test style under a class selector, and here doing a document.getElementById("filter").classList.add(...)

> LayoutTests/css3/filters/backdrop/dynamic-with-clip-path.html:25
> +    }, 100);

0 works for me.
Comment 10 mitz 2016-10-22 19:53:10 PDT
Thanks, Simon! Made the changes and fixed in <https://trac.webkit.org/r207723>.