mix-blend-mode does not always work - css

Question

I'm trying to achieve gradual text fading effect at the bottom of the scrollable block. Also there must be an image behind this block so simply placing color (opacity) gradient over this block won't do and mix-blend-mode must be used.
The block has the following structure:
<div id="stage"><img ...></div>
<div class="layer">
<h2>...</h2>
<div class="text">
<div class="scroll-box">
<div class="container">...</div>
::after
</div>
<div class="scroll-tools">...</div>
</div>
</div>
.container contains some text. .scroll-tools contain custom scrollbar elements (rail and thumb). Here's jsfiddle.
Almost everything there looks as it should. Except scrollbar's rail is invisible due to it being black and mix-blend-mode: screen being applied to .layer and scrollbar's thumb has wrong color.
To exclude scrollbar from being blended I tried applying mix-blend-mode to .scroll-box but for some reason this does not work.
Question1: Is it possible to achieve the same effect with text in my case without affecting scrollbar? How?
Question2: Why mix-blend-mode doesn't work when being applied to .scroll-box (or .text)?

Answer 1

Blend mode: screen is not the only trick in the box.
You can also use hard-light.
Using this one, the color to get transparency is gray. And white and black are preserved
.test {
width: 300px;
height: 300px;
mix-blend-mode: hard-light;
}
.box {
width: 100px;
height: 100px;
background-color: white;
display: inline-block;
}
.box:first-of-type {
background-color: black;
}
.bkg {
background-image: linear-gradient(to top, lightblue, tomato);
}
p {
position: relative;
}
p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 20%, rgb(128, 128, 128) 80%);
}
<div class="bkg">
<div class="test">
<p>Lorem ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis verterem maiestatis</p><p>
</p><div class="box"></div>
<div class="box"></div>
</div>
</div>

Answer 2

This doesn't have cross browser support but it's fun to play with
I think it matches what you described.
With that being said, this is not really a functional answer.
.main {
height: 200px;
width:300px;
margin:0 auto;
text-align:justify;
}
.wrap {
max-height: 100%;
overflow: auto;
padding:20px;
}
.inner {
-webkit-mask-image:
linear-gradient(to top, rgba(0, 0, 0, 0)5%,/** <---- Use this to determine the cutoff point **/
rgba(0, 0, 0, .25), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1))
}
<div class="main">
<div class="wrap">
<div class="inner">Lorem ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis verterem maiestatis
duo ea, vix an nostrud veritus democritum, duo zril platonem ad. Cum aeque blandit appareat an, cum cu minim iusto, pro aperiam reformidans ne. Vix bonorum legimus cu, has iusto appareat eu. Etiam iracundia no has, quo velit definitiones an. Ne
quo causae interesset scribentur, et pri affert dicant, est erant noster semper ei. Ea euismod antiopam electram ius, vero homero insolens ius ad, vel prima zril id. Ius te error apeirian. Vidisse intellegebat est eu, ut mea epicurei deserunt pertinacia,
cu lorem atomorum eos. ipsum dolor sit amet, mel et timeam deseruisse. Ceteros repudiandae mel ad. Id tantas graece maiorum usu. Nonumes efficiendi ius te, ea harum dictas nam. Eos harum iriure regione ut. Est labitur iudicabit urbanitas et. Inermis
verterem maiestatis duo ea, vix an nostrud veritus democritum, duo zril platonem ad. Cum aeque blandit appareat an, cum cu minim iusto, pro aperiam reformidans ne. Vix bonorum legimus cu, has iusto appareat eu. Etiam iracundia no has, quo velit
definitiones an. Ne quo causae interesset scribentur, et pri affert dicant, est erant noster semper ei. Ea euismod antiopam electram ius, vero homero insolens ius ad, vel prima zril id. Ius te error apeirian. Vidisse intellegebat est eu, ut mea
epicurei deserunt pertinacia, cu lorem atomorum eos.</div>
</div>
</div>