1423750 - CSS Masks sometimes render the affected element invisible

Status: RESOLVED WORKSFORME

(Core :: Layout, defect, P3)

Description

[tenrys.iaido]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171128222554

Steps to reproduce:

On my website I have icons related to twitter, Facebook, etc. and use masks in conjunction with background colors to create dynamic icons which I can change colors of as I like.


Actual results:

Sometimes the mask doesn't display at all, rendering the element invisible, until it is hovered or the page gets resized. Seems like it is related to rendering updates.
Looks like this: https://tenrys.pw/ShareX/2017/Dec/NRr1.png

You can see this happening on my website: http://tenrys.pw
It works as expected on Chrome.


Expected results:

I should be seeing the background cut into the form of the mask I provided to create an icon with changeable color.
Should look like this: https://tenrys.pw/ShareX/2017/Dec/FGFs.png

Comment 1

[Gregory Pappas [:gregp]]

Reporter, are you still experiencing this issue?

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Redirect a needinfo that is pending on an inactive user to the triage owner.
:dholbert, since the bug has recent activity, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Gregory Pappas [:gregp]]

Was able to reproduce in older versions of Firefox using an archived version of the page

mozregression --arg="https://web.archive.org/web/20180506070901if_/http://tenrys.pw/" --bad 2017-12-06 --good 2018-01-15 --find-fix

With WebRender force-enabled, I got this pushlog https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=4db166f0442dddc5b9011c722d7499501fedf283&tochange=8142a68bf0a7b44c2502888ba6b2a930edf428fd which includes bug 1425260.

That bug made gfx.webrender.all enable WR on Linux. So, I guess this issue was fixed by WebRender.

Comment 4

[Daniel Holbert [:dholbert]]

Thanks!