I would like to set the mix blend mode of an anchor inside of a position:fixed
element but it is not applied.
If I apply the mix blend mode to the parent element it works or if I set the parent element to position:absolute
it also works but neither of these are what I'm wanting to achieve.
Codepen with the three examples, I'd like #nav to look like #nav2 and #nav3 with the existing html.
http://codepen.io/wesdeboer/pen/QjawYv
HTML
<body>
<div id="nav">
<a href="">fixed</a>
</div>
<div id="nav2">
<a href="">absolute</a>
</div>
<div id="nav3">
<a href="">parent</a>
</div>
</body>
CSS
body { background: url(http://lorempixel.com/400/200)}
#nav {
position: fixed;
top:0;
left: 0;
}
#nav2 {
position: absolute;
top:0;
left: 100px;
}
#nav3 {
position: fixed;
top: 0;
left: 250px;
mix-blend-mode: difference;
}
a {
color: white;
font-weight: bold;
font-size: 32px;
mix-blend-mode: difference;
}
Tested in Chrome 45