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/

What behavior you want? Clipped to text background to scroll or not scroll? — the Hutt, Jan 04 '22 at 10:52

score 3 · Answer 1 · answered Jan 04 '22 at 13:24

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>

score 1 · Answer 2 · edited Nov 01 '22 at 20:26

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

please tell what exactly occurs you can't scroll/you can't see gradient/scrollbar invisible/everything invisible.I can solve by adding -moz- to property I guess — Neptotech -vishnu, Jan 04 '22 at 15:53
The appearance is the same as on Chrome, but it is not possible to scroll vertically on Firefox either with the mousewheel or with the arrow keys. — Tom, Jan 04 '22 at 16:03
*hover your mouse* **over text** and scroll in chrome, its because I have hided scroll bar,I have edited the post now — Neptotech -vishnu, Jan 04 '22 at 16:06
Yes, it works as intended on Chrome, I said that the vertical scroll does not work on Firefox. — Tom, Jan 04 '22 at 16:11
NOW it will WORK in firefox!!! TRY IT! (make sure to hover your mouse over the center of text and scroll down) — Neptotech -vishnu, Jan 05 '22 at 11:34

score 0 · Answer 3 · answered Jan 10 '22 at 06:41

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%); 
}

gopal prabhu · Answer 4 · 2022-01-10T14:50:29.543

0

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.

edited Jan 10 '22 at 14:50

answered Jan 10 '22 at 11:17

gopal prabhu

213
1
3
10

Wrong scroll behaviour when using background-clip

4 Answers4