CODEWITHSUNDEEP
cssfirefoxsvgtextmask
Anna Kosolapova
Anna Kosolapova

Reputation: 23

SVG text used in CSS mask doesn't work in Firefox

Feel trapped with trying to make my mask work in Firefox. Already've spent tonnes of time on researching, however, with no success. Probably, I'm missing something obvious, would highly appreciate if people have a look and help me.

Idea is taken from here: https://codepen.io/SahAssar/pen/YPWxWX (works in FF within the CodePen, but I've tried to implement the same code directly, and it doesn't work in FF).

My implementation is the following (html):

<html>
  <head>
    <link href="./styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="section">
      <svg class="svg" width="1920px" height="1080px">
        <defs>
          <mask id="mask" x="0" y="0" width="100%" height="100%" >
            <rect class="maskRect" x="0" y="0" width="100%" height="100%" />
            <text x="0" y="30%" textAnchor="middle" id="js-mask" class="titleText">
              <tspan x="0" dy="0px">knockedout</tspan>
              <tspan x="0" dy="120px">mask</tspan>
            </text>
          </mask>
        </defs>
        <rect class="svgRect" x="0" y="0" width="100%" height="100%" />
        <g class="content">
          <text x="0" y="60%" textAnchor="middle" id="js-below-mask">
            <tspan class="titleText highlight" x="0" dy="0px" textAnchor="middle">visible content</tspan>
          </text>
        </g>
      </svg>
      <video class="video" autoPlay="autoplay" muted="muted" preload="auto" loop="loop">
        <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4" />
        <source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm" />
      </video>
    </div>
  <body>
</html>

and css:

    body {
  position relative
}

.section {
  position: relative;
  min-height: 750px;
  max-height: 1200px;
  height: 100vh;
  overflow: hidden;
}
.svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.maskRect {
  fill: white;
}

.svgRect {
  fill: black;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}

.titleText {
  font-size: 200px;
  font-weight: bold;
  font-size: rem(150px);
}

.highlight {
  fill: white;
}

So it works in all the browsers except Firefox. In FF mask just disappears and I see nothing except visible part of SVG on top of the div.

Seen all related issues on bugzilla, but all of them are pretty old and seem resolved, so everything should work fine... (585539, 433345, 333698)

Tried to add fill="white" directly to svg, but it also had no effect, unfortunately.

Sorry, I'm very new to SVG and css masking. Your help is highly appreciated.

Thank you in advance.

UPD: created an archive with code example so you can run it directly, not using js-fiddles or codepens, etc

http://www.filedropper.com/maskexample

UPD2: This code works in online editors like Js-fiddle and CodePen when opened in Firefox, but it DOES NOT work directly in the browser.

UPD3: Alright, I've figured out the difference between my code and Js-fiddle. But I still don't know the reason of such a behaviour. So JS-fiddle put styles inline on the page, and if I also put them inline in my code and open directly in FF it works, but I really DO want styles in a separate file, and this behaviour is creepy as I can see all my styles from a separate stylesheet applied when inspecting it, but it does not work properly (I could probably understood that if I link css file incorrectly, but it's actually just a copy-pasting and I see all styles applied except the mask).

So this bit should be inline in order to work:

.svgRect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

Upvotes: 0

Views: 947

Answers (1)

Anna Kosolapova
Anna Kosolapova

Reputation: 23

So, putting masking styles inline solved my problem. For some reason (which is still curious to me) when they are separated in css file, they are applied to the element, but have no visual effect in Firefox.

<rect
  style={{
   '-webkit-mask': 'url(#mask)',
    mask: 'url(#mask)',
    fill: 'url(#gradient)',
  }}
/>

Or to keep it in a separate file this solves the problem SVG "fill: url(#....)" behaving strangely in Firefox - exactly my issue

mask: 'url(/#mask)'

That's interesting

Upvotes: 1

Related Questions