1106895 - CSS grayscale filter (using url property) causes filtered element to disappear, in certain instances(position: fixed/absolute)

Status: RESOLVED WORKSFORME

(Core :: General, defect)

Description

[chris]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141125180439

Steps to reproduce:

Our site is designed to become grayscale under certain circumstances. We apply an SVG filter similar to this one: http://stackoverflow.com/a/12173285, http://jsfiddle.net/xDJzU/7/

For some reason, this doesn't work with the particular combination of elements we have on our page.

1) Go to http://beta.adventurecow.com/stories/1/the-brownsville-detective-service/p/start?pid=None
2) Apply the filter CSS property to the body element:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

--

This has worked on other pages (on this one, for instance); so not sure what we're adding to the DOM that causes the break.

Thanks!


Actual results:

Page disappears.


Expected results:

Page should become grayscale.

Comment 1

[Robert Longson [:longsonr]]

Please add a small as possible testcase which demonstrates the issue (without manually changing anything) to the issue. The filter seems to work for me, though I suspect adding it to the body of the webpage is not a good idea.

Comment 2

[Boris Zbarsky [:bzbarsky]]

I can confirm the issue on Mac nightly, for what it's worth...

Comment 3

[chris]

Hi Robert - the filter was working on the body of that beta.adventurecow.com page? Well, that's confusing. Maybe a different version.

This was a difficult issue to debug, because when I start with a page from scratch the filter works just fine. I'm not sure at what point the filter causes a problem, but...

I did do an experiment that might help. If you set the height of the html and body elements in the test case to 100%, the filter works fine. I suppose perhaps the filter causes the rendering engine to redraw the body box, clipping everything outside of it? I have no idea, but hopefully that makes the cause of this behavior apparent to someone with more knowledge than I...

Comment 4

[Alice0775 White]

Attachment: testcase html

Comment 5

[Alice0775 White]

Attachment: testcase2

Comment 6

[Boris Zbarsky [:bzbarsky]]

Robert, can you look into this?  If not, do you know who can?

Comment 7

[Robert Longson [:longsonr]]

I had a look this weekend. It doesn't seem like it's getting to the filter painting code which suggests that something might be going wrong constructing layers. I will keep looking but you might want someone who has more time to look into this such as mstange.

Comment 8

[Robert Longson [:longsonr]]

Attachment: applying to individual elements seems to work OK

Comment 9

[Cornel Ionce [:noni] [Hubs QA]]

Reproduced on Windows 7 64-bit, Ubuntu 14.04 64-bit and Mac OS X 10.9.5 using latest Firefox Nightly, build ID: 20150318055750.

Comment 10

[sorin]

For what it’s worth what I have found is that any absolutely or fixed positioned element inside an element that has any CSS filter applied disappears. I have tested in the latest Firefox on both OS X and Linux.

Here is a simple fiddle to demonstrate the issue: http://jsbin.com/topaqoqebe/1/edit?html,css,output

Comment 11

[Eirikur H. Nilsson]

Have the same issue.

A workaround is to give the filter element a stacking context in any way. According to the spec, filter is supposed to do that by itself, so I think that's the crux of the problem.

Comment 12

[Eirikur H. Nilsson]

I'm sorry. There's obviously more to this.

Filter does indeed seem to create a stacking context. Not much seems to make a fixed child appear, but making the filtered element relative at least renders absolute children.

Comment 13

[Sergei Vasiliev]

If element has filter initially, its children will use this element as containing block.
If filter has dynamically added to element, then it will hide overflowing children.

By children I mean an either absolutely or fixed positioned element inside an element with filter.

http://jsfiddle.net/SerGen/Ld3hqak2/

Firefox DE 41.0a2 (12.07.2015)

Comment 14

[Monty]

I can add some more to this.

http://mon.github.io/firefoxInvert/

Correct behaviour would have the text at the bottom of the window, and removing the filter (NOT through the devtools, a refresh is required) displays it as such.

With the filter applied, the text is located above the margin - it doesn't disappear, it's just rendered in the wrong spot.

Comment 15

[Sergey Vlasov]

Duplicate of bug 1226095?

Comment 16

[Boris Zbarsky [:bzbarsky]]

Some of the comments in this bug are, but it's not clear the the original reported issue is.

Comment 17

[u459114]

Attachment: Bug 1106895 - (WIP) Fix attachment 8531817 anand attachment 8531848 which created by Alice.

Review commit: https://reviewboard.mozilla.org/r/170000/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/170000/