Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect.
You can see an example of this technique here (click the + icon in the top right).
If you tweak the code slightly to enclose the elements without background in a container with position: fixed, it fails, as shown in this example. However, position: absolute works perfectly fine.
I require a setup similar to the example, where there's a parent with a position-fixed that supports variable heights or widths and multiple instances of the .box element. I have a rough idea why it fails (fixed position removes it from the document flow, hence nothing to blend), but I'm stumped on finding a solution.
Here is another simplified instance I created that demonstrates the issue - if you comment out position-fixed, everything functions smoothly:
.blend {
height: 100%;
box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
mix-blend-mode: multiply;
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.box {
background: grey;
min-height: 10px;
width: 100%;
position: relative;
margin: 0 0 15px;
}
.container {
/* using absolute works */
position: absolute;
/* using fixed does not work */
position: fixed;
height: 50%;
width: 50%;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
.column {
position: relative;
width: 50%;
height: 100%;
}
.left {
background: #2D2D2D;
}
.right {
background: #f6f6f6;
}<div class="column left"></div>
<div class="column right"></div>
<div class="container">
<div class="box">
text
<div class="blend"></div>
</div>
<div class="box">
text<br /><br />more text
<div class="blend"></div>
</div>
</div>(Referenced a related question, but couldn't validate their example)