1589198 - backdrop-filter causes blurring due to incorrect pixel snapping

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect, P3)

Description

[Connor Brewster [:cbrewster]]

Continuing from https://bugzilla.mozilla.org/show_bug.cgi?id=1178765#c82

According to Bx, in Firefox 71, backdrop-filter is applying the filter effect to other elements than just the backdrop.

Test case: https://jsfiddle.net/ziom1/kjw2690e/

I cannot reproduce this behavior, Bx can you provide a screenshot and the platform you are using?

Comment 1

[Markus Stange [:mstange]]

Bx, see comment 0.

Comment 2

[Daniel]

I'm not a Bx, but I can provide a screenshot.

https://sun9-15.userapi.com/c851236/v851236476/1e6d3e/ZgZlKqrlv_s.jpg

Windows 10 1903 (build 18362.418, latest updates). FF 71.0b1 (Developer Edition)

DxDiag if needed: https://dk4000.pro/DxDiag.txt

Comment 3

[Bx]

Attachment: firefox_blurred.png

"backdrop-filter: blur(10px)" only on dark rectangles, but as you can see "Some text" and buttons are also blurred. Dashed squares are over backdrop-filter layer and two (top left and top right) are also blurred.

Comment 4

[Bx]

Attachment: firefox_notblurred.png

"backdrop-filter: blur(10px)" turned off due to changing "transform" property of the lowest layer (pink background element). "Some text", buttons and dashed squares are perfectly sharp now.

Comment 5

[Bx]

Attachment: chrome_screen.png

Chrome behavior example.

Comment 6

[Bx]

Attachment: edge_screen.png

Microsoft Edge screen example.

Comment 7

[Bx]

Attachment: edge_screen.png

Comment 8

[Bx]

Windows 10 v. 1903 (build 18362.418). Firefox Developer Edition 71.0b1 (64 bits). 16 GB RAM, powerful GPU.
Before Firefox 71.0 everything was good (sharp and valid behavior).

Comment 9

[Connor Brewster [:cbrewster]]

I now see the issue. The backdrop-filter is not being applied to everything. The blur to everything is happening due to incorrect pixel snapping, if you resize the iframe in the testcase you can see the issue with the snapping.

This looks similar to the issue I fixed in bug 1573914. The test case there has also regressed https://codepen.io/cgbrewster/pen/OJLyjGp

Comment 10

[Timothy Nikkel (:tnikkel)]

I can't see the backdrop effect at all on either testcase here on mac, I've confirmed that webrender is enabled. I've tried nightlies from shortly after the backdrop support landed and the bug fix mentioned landed, I've tried recent nightlies, I've tried in between nightlies. Is this expected or a bug that should also be filed?

(In reply to Connor Brewster [:cbrewster] from comment #9)

I now see the issue. The backdrop-filter is not being applied to everything. The blur to everything is happening due to incorrect pixel snapping, if you resize the iframe in the testcase you can see the issue with the snapping.

This looks similar to the issue I fixed in bug 1573914. The test case there has also regressed https://codepen.io/cgbrewster/pen/OJLyjGp

Andrew landed a bug change to pixel snapping recently, so perhaps it is that?

Comment 11

[Connor Brewster [:cbrewster]]

(In reply to Timothy Nikkel (:tnikkel) from comment #10)

I can't see the backdrop effect at all on either testcase here on mac, I've confirmed that webrender is enabled. I've tried nightlies from shortly after the backdrop support landed and the bug fix mentioned landed, I've tried recent nightlies, I've tried in between nightlies. Is this expected or a bug that should also be filed?

Did you make sure layout.css.backdrop-filter.enabled is also enabled?

Comment 12

[Timothy Nikkel (:tnikkel)]

(In reply to Connor Brewster [:cbrewster] from comment #11)

Did you make sure layout.css.backdrop-filter.enabled is also enabled?

Ah, I did not know it was behind a pref, thanks.

Comment 13

[Timothy Nikkel (:tnikkel)]

regression range for https://codepen.io/cgbrewster/pen/OJLyjGp

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a8b8823a6b72114f4150fbcd2ab0728b833b6a04&tochange=ef5f9e04f04b648bdee5517bcbf71895acf2314e

-> bug 1574493

regression range for https://jsfiddle.net/ziom1/kjw2690e/

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=4c4c25595fe8e9b234e9731128abbd4e324749d8&tochange=96ce8d267d27ed5a0b0b9cd7e105dcf90010d78f

-> bug 1581934

Comment 14

[Andrew Osmond [:aosmond] (he/him)]

Attachment: Bug 1589198 - Snap the picture's precise local rect the same as the estimated local rect.

Comment 15

[Andrew Osmond [:aosmond] (he/him)]

Looks like I made it inconsistently calculate the estimated and precise local rects for a picture during frame building. I would think this would affect more than just backdrop filters.....

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a3a7133456b4
Snap the picture's precise local rect the same as the estimated local rect. r=kvark

Comment 17

[Daniel Varga [:dvarga]]

Backed out changeset a3a7133456b4 (Bug 1589198) for reftest at layout/reftests/svg/filters/filter-nested-filtering-02.svg.

Push with failure: https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&searchStr=reftest&revision=a3a7133456b43bf3ba28681de8801384ef2986b7

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=276969763&repo=autoland&lineNumber=2968

Backout link: https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&resultStatus=testfailed%2Cbusted%2Cexception&searchStr=reftest&revision=dfb8abe85d3a5265d211365a17f1197cababbf91

Reftest analyzer: https://hg.mozilla.org/mozilla-central/raw-file/tip/layout/tools/reftest/reftest-analyzer.xhtml#logurl=https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/BXQmvULtRJG3yaGYrWUr0Q/runs/0/artifacts/public/logs/live_backing.log&only_show_unexpected=1

Comment 18

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/981d7988a279
Backed out changeset a3a7133456b4 for reftest at layout/reftests/svg/filters/filter-nested-filtering-02.svg. On a CLOSED TREE

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d411c02c12ff
Snap the picture's precise local rect the same as the estimated local rect. r=kvark

Comment 20

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/d411c02c12ff