Firefox gradient as mask

Good day everyone, I'm adopting this sample to cross-browser solution

I've allready adopted everything except one thing on line 122:

-webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);

Seems like FF can't generate gradient as mask. I've tried this generator for generating base64 svg and applying this as mask, but no success, either i don't understand something on svg generation.

Can anyone point me what am i doing wrong?

Answers


Firefox does not understand rules for webkit. Try "-moz-linear-gradient" for gradient generation and "mask" for masking. Although Firefox can't use gradients for masking, but needs svg masks. Find some information e.g. in this post.


Need Your Help

I need to design table with header text and arrow

android android-layout

I need to create a table with header text and arrows. table data is dynamic from server.

How to Sort the elements as per sequence given in XSD xshema file with XSLT 2: perform-sort

xslt xslt-2.0

I am using SaxonHE jars for XSLT 2.0 processors to change the sequence of the elements to the required sequence by XSD. But not getting the desired output.