CODEWITHSUNDEEP
htmlcssfirefox
Sonia
Sonia

Reputation: 253

Masks won't work in Firefox

I've the last version of firefox and there are no ways for make the masks working. I read all the discussion about this problem, and no one of the solution adopted works.

I've assigned an ID to the object too (the file for the mask is an SVG)

This is the code

<img id="immy" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/05/22-amazing-landscape.jpg">

css

#immy
{
    -webkit-mask-image: url(cerchio.svg); /*chrome*/
    mask: url(cerchio.svg#cer); /*firefox*/
}

In chrome all works fine, while in FF i see only a full white page (such if the mask covers all the image).

Upvotes: 0

Views: 1023

Answers (2)

Sampson
Sampson

Reputation: 268512

CSS Masks are an experimental feature currently only implemented in Webkit. They aren't currently fully-supported in Firefox, Internet Explorer, or any other non-webkit browser.

Source: http://caniuse.com/#search=mask

Masks are supported in all major browsers (including IE9+) for SVG elements. Going that route would give you a far more consistent experience everywhere. See http://jsfiddle.net/jonathansampson/S7ctE/

<svg width="100" height="100">
    <defs>
        <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="http://i.imgur.com/7Nlcay7.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
    <polygon fill="url(#a)" points="25 0, 50 0, 75 0, 100 25, 100 50, 100 75, 75 100, 50 100, 25 100, 0 75, 0 50, 0 25" />
</svg>

Upvotes: 4

Ricardo Arrigoni
Ricardo Arrigoni

Reputation: 11

Your firefox version must be 3.5 (1.9.1) or newer.

Check it out more in this link: https://developer.mozilla.org/en-US/docs/CSS/mask

Upvotes: 0

Related Questions