CSS webkit image mask not working

Question

I'm trying to follow some tutorials on applying masks but whenever I apply anything to my h1 all the text disappears completely. I've tried using image masks and gradients and the same thing happens.

<h1 id="site-name">
    <a href="/" title="Home"><span>The Biospheric Project</span></a>
</h1>

CSS using the gradient

h1 { 
    -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)),
    to(rgba(0,0,0,.2)));
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);
}

Answer 1

The problem is accessing your page using file:// instead of https://

Firefox and Chrome (and maybe others) will silently fail when attempting to apply a mask if you access your HTML file using the file:// protocol. You will instead see the entire CSS element masked out completely (i.e. it disappears, but it still occupies space on the screen). To fix it, you need to either open your page via localhost:// (eg, using a local Apache server) or upload to your remote server and test it from there.

This is relatively annoying, given browsers can load images locally no problem using the file:// protocol. A discussion on the Mozilla bugzilla suggests that new features (such as mask-image) are being protected by CORS, but existing features (such as <img src) are not, but with no real rhyme or reason to it.