Wrong scroll behaviour when using background-clip

Question

When using background-clip: text and -*-text-fill-color: transparent; together with overflow: auto the scrolling is inconsistent in Firefox and it seems to not scroll at all on Chrome (both MacOS). There seem to be rendering issues.

I tried changing the background-attachment, adding transform (to trigger GPU) but nothing seemed to work.

body {
  background: #369;
  color: #fff;
}

.wrap {
  height: 50vh;
  overflow: auto;
  font: 26px / 1.5 sans-serif;
  background-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%);
  background-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

<div class="wrap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!
</div>

Demo: https://jsfiddle.net/wdpmohcL/2/

Answer 1

body {
  background: #369;/*bg color*/
  color: #fff;
}
.wrap {
  overflow: auto;
  width: 100%;
  height: 50vh;
  display: inline-block;
  margin: 10px;/*x*/
  position: relative;
  font: 26px / 1.5 sans-serif;
  -ms-overflow-style: none;  /* IE and Edge ,hide scroll bar*/
  scrollbar-width: none;  /* Firefox ,hide scroll bar*/
}
.wrap::-webkit-scrollbar {
  display: none;/*hide scroll bar*/
}

.dwn{

  height: 15vh;/*y*/
  width: 100%;
  bottom: 15vh;/*y*/
  position: relative;
  background: linear-gradient( transparent 0%,#369/*use same color as bg*/ 100%);
  background: -webkit-linear-gradient( transparent 0%,#369/*use same color as bg*/ 100%);

}
.upn{

  height: 15vh;/*y*/
  width: 100%;
  top: 10px;/*x*/
  position: absolute;
  z-index: 100;
  background: linear-gradient( #369/*use same color as bg*/ 0%, transparent 100%);
  background: -webkit-linear-gradient( #369/*use same color as bg*/ 0%, transparent 100%);
}

    <div class="tl">
    <div class="upn">
  </div>
      <div class="wrap" id="prisonerResponse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
        ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt
        aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi
        blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at
        distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum
        delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis! Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis! Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima
        nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus
        dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
        aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
        laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis
        veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio
        eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus
        ipsa, sequi blanditiis veritatis!
      </div>
      <div class="dwn">
      </div>
    </div>

(Run it IN FULL PAGE)

Here we

• do some stuff to it by using position&display which makes it scrollable as well as dynamically fades in top and bottom
• hide scrollbar(it works even without hiding scrollbar!)
• since we hide scrollbar hover your mouse over text and scroll
• we have made it work in firefox by .dwn,.upn div classes thus hover your mouse over the center of text and scroll down

StackBlitz Code-https://stackblitz.com/edit/web-platform-1cfdsj?file=index.html
Demo-https://web-platform-1cfdsj.stackblitz.io

Answer 2

The scroll works if you add background-attachment: local :

body {
  background: #369;
  color: #fff;
}

.wrap {
  height: 50vh;
  overflow: auto;
  font: 26px / 1.5 sans-serif;
  background-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%);
  background-color: transparent;
  background-clip: text;
  background-attachment: local;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

<div class="wrap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!
</div>

Answer 3

The problem was that background was not fixed relative to the "element's contents". Using: background-attachment: local; will help make the background fixed relative to the element's contents.

Add background-attachment: local; to the wrap class.

Answer 4

Try using:

.wrap {
  height: 50vh;
  overflow: auto;
  font: 26px / 1.5 sans-serif;
  mask-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%);
 -webkit-mask-image: linear-gradient(180deg, transparent 0, currentColor 30%, currentColor 70%, transparent 100%); 
}