mix-blend-mode does not always work

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)?

score 1 · Answer 1 · answered Jun 26 '17 at 18:33

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>

I haz kode · Accepted Answer · 2017-06-26T18:12:14.097

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>

mix-blend-mode does not always work

2 Answers2