14

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

1
  • I also couldn't get mix-blend-mode to work on children of fixed position elements. My workaround was to move the children up a level and make each child position fixed, but this wasn't ideal as required JS to position them. Jan 11, 2016 at 17:47

1 Answer 1

29

The reason position: fixed; on a parent element prevents mix-blend-mode from behaving as you expect is that position: fixed; creates a new stacking context, isolating the child element from the rest of the document.

I verified that this is indeed the issue by forking your example and creating a new nav item which creates a new stacking context in a different way: by positioning it absolutely and setting z-index. This new stacking context prevents the child element from blending with the background image outside the stacking context, just as we observed with the position: fixed; element.

Demo Screenshot

position: fixed; and position: absolute; z-index: 3; are just two of many ways to create a new stacking context, all of which should create this issue:

Your options for getting around this limitation include:

  • Finding a way to position / style the parent that doesn't result in a new stacking context.
  • Applying the problematic styling / positioning to the children instead of the parent; ie, positioning the individual children using fixed.
  • Applying mix-blend-mode to the parent that has created the new stacking context rather than a child of that stacking context.
  • Applying the background image to the parent that has created the new stacking context and sizing / positioning it to align with the existing background image.
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.