mix-blend-mode doesn't work?

Question

Inspired from this example, I create this which doesn't work. Please check the complete code from here.

a.videolink:link, { 
font-size: 50px; 
font-family: Arial, Helvetica, sans-serif; 
color: white;
mix-blend-mode: exclusion;
text-align: right;
width: 350px;
text-decoration: none;
}

<div style="position:fixed;left:150px;bottom:150px;">
<a id="videotittle" class="videolink" href="" target="_blank"> 
</a>
</div>

Answer 1

In FF your problem comes from the position:fixed of your element's parent.

I guess fixed elements can't do mix with bottom layers...

Here is an updated fiddle where the anchor's has been positioned absolutely which will work only in FF.

In chrome, it seems you need to set the element at the same level as the video -> inside the same container...

fiddle for chrome

Answer 2

This is a surprisingly difficult question to find general solutions to - the answer is usually 'add a background'!

Another issue I just came across is z-index resets the stacking content so if you're expecting to blend with the background of an ancestor element this can break that.

For a simple color background you can add background: inherit to propagate the background down. Whether this makes sense or not will depend on the structure of your site - for instance it won't work for a gradient if the boxes aren't positioned on top of each other.