Can a fixed background-image that's clipped to text scroll in Firefox?

Question

In all modern browsers, the background-clip: text style will cause the background to be clipped to the shape of the text in the element (MDN). Scroll the rendered result and the background-clipped text moves along with everything else on the page:

h1 {
  -webkit-background-clip: text; /* chrome, opera */
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent; /* let the background be visible through otherwise opaque text */
}

/* make it easier to see scrolling and clip effect */
body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

<h1>The quick brown fox</h1>
<p>Regular, un-clipped text for reference.</p>

However, if I add background-attachment: fixed, the text will stop scrolling in Firefox only:

h1 {
  background-attachment: fixed; /* <-- added */
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent;
}

body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}

<h1>The quick brown fox</h1>
<p>Regular, un-clipped text for reference.</p>

Is there anything I can do to get the text to move with the scroll in Firefox? Is this a Firefox bug?

Answer 1

You can use an inline SVG and a mask to achieve the same effect. You will, however, have to fiddle with the SVG dimensions or use JavaScript to obtain a solution that applies to ever-changing text (e.g. for use in a template). Maybe somebody can help to turn this into a solution which is ready for its use within templates.

Example:

.text-with-pic-bg {
  margin:0 auto;
  width: 80vw;
  height:50vh;
  padding: 10rem 0;
  background-image: url(https://picsum.photos/id/210/1920/1280);
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  mask-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='284px' width='1683.03px'><text y='221' style='font-family:Arial;font-weight:900;font-size:200px;'>HELLO WORLD!</text></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='284px' width='1683.03px'><text y='221' style='font-family:Arial;font-weight:900;font-size:200px;'>HELLO WORLD!</text></svg>");
  mask-size: 80vw;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 80vw;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
/* some general styling */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #ccc;
}

.some-height {
  min-height: 75vh;
}

<div class="some-height"></div>
<div class="text-with-pic-bg"></div>
<div class="some-height"></div>