CSS: browser compatibility issues using 'background-clip: text' and linear-gradient

Question

I am attempting to create a faded text effect on scroll where the text at the top and bottom of the element are transparent but the text in the center remains fully opaque. There is also infinitely scrolling text over a video background. Because it is not easy to explain the effect, here is a demo of the effect working only on Chrome so far:

Working demo: http://dboxcg.dev.dbox.com/portfolio

It's working on chrome (v81.0.4) but breaking on firefox, safari and all mobile browsers.

Here is the code for the above demo:

.container {
  background:linear-gradient(rgba(255,255,255,0) 10%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

.video-background {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="container">
  <ul>
     <li><a href="/portfolio/108_leonard">108 LEONARD</a></li>
     <li><a href="/portfolio/20_grosvenor_square">20 GROSVENOR SQUARE</a></li>
     <li><a href="/portfolio/25_park_row">25 PARK ROW</a></li>
     <li><a href="/portfolio/432_park_avenue">432 PARK AVENUE</a></li>
     <li><a href="/portfolio/57_ocean">57 OCEAN</a></li>
     <li><a href="/portfolio/aerials">AERIALS</a></li>
     <li><a href="/portfolio/animations_films">ANIMATIONS / FILMS</a></li>
     <li><a href="/portfolio/bathrooms">BATHROOMS</a></li>
     <li><a href="/portfolio/bedrooms">BEDROOMS</a></li>
     <li><a href="/portfolio/human_models_in_cg">HUMAN MODELS IN CG</a></li>
     <li><a href="/portfolio/institutions">INSTITUTIONS</a></li>
  </ul>
  <div class="video-background">
    <video src="https://player.vimeo.com/external/111111.hd.mp4" style="width: 100%; height: 100%;" preload="auto" autoplay="" loop="" playsinline="" webkit-playsinline="" x5-playsinline=""></video>
  </div>
</div>

I was able to get the above working on Chrome via the answers in this question: Fade out text on image

mask-image looks like the right CSS property but I am running into an issue of the infinitely scrolling text in my example.

Is it possible to get some semblance of cross-browser compatibility for this effect?

Answer 1

Here is how it can be done using mask. The trick is to have two layers. One below the text and the same above the text where you apply the mask.

Here is an example where I used and image but you can do it with a video like you did in your example

.box {
  padding:0 100px;
  font-size:50px;
  font-weight:bold;
  color:#fff;
}

html {
  min-height:100%;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
}
html:before {
  content:"";
  position:fixed;
  z-index:99;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
  -webkit-mask: linear-gradient(#fff,transparent 30% 70%,#fff);
          mask: linear-gradient(#fff,transparent 30% 70%,#fff);
}

<div class="box">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac venenatis enim. Suspendisse vestibulum mattis finibus. Ut velit metus, pulvinar id elementum nec, tempus et mi. Phasellus consequat mauris nisi, a iaculis nulla molestie eget. Praesent velit arcu, consectetur ac arcu ac, volutpat laoreet erat. Nulla eu est dui. Pellentesque ultricies finibus velit sit amet feugiat. Integer posuere mauris eu faucibus laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam in ullamcorper dui. Nunc fermentum scelerisque metus cursus tincidunt. Phasellus tortor justo, gravida eget mi sed, condimentum placerat neque. Vivamus fermentum quam a tincidunt placerat. Pellentesque quis dictum odio.
</div>