CSS: проблемы совместимости браузера с использованием 'background-clip: text' и линейного градиента

Question

Я пытаюсь создать эффект блеклого текста при прокрутке, когда текст вверху и внизу элемента прозрачен, но текст в центре остается полностью непрозрачным. Существует также бесконечная прокрутка текста на фоне видео. Поскольку объяснить эффект непросто, ниже приведена демонстрация эффекта, работающего только на Chrome:

Рабочая демонстрация: http://dboxcg.dev.dbox.com/portfolio

Он работает на chrome (v81.0.4), но работает на firefox, сафари и всех мобильных браузерах.

Вот код для вышеприведенной демонстрации:

.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>

Мне удалось получить вышеуказанную работу над Chrome с помощью ответов на этот вопрос: Исчезновение текста на изображении

mask-image выглядит как правильное свойство CSS, но я сталкиваюсь с проблемой бесконечно прокручиваемого текста в моем примере.

Возможно ли получить некоторое подобие кросс-браузерной совместимости для этот эффект?

Answer 1

Вот как это можно сделать с помощью маски. Хитрость заключается в том, чтобы иметь два слоя. Один ниже текста и тот же выше текста, где вы применяете маску.

Вот пример, где я использовал и изображение, но вы можете сделать это с видео, как вы сделали в вашем примере

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

html {
  min-height:100%;
  background:url(https://i.picsum.photos/id/1074/1000/1000.jpg) 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://i.picsum.photos/id/1074/1000/1000.jpg) 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>