Using css mix-blend-mode with a child of a position fixed element

Question

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

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. — Jon Higgins, Jan 11 '16 at 17:47

Nathan Arthur · Answer 1 · 2019-06-11T14:06:02.060

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:

Element with a position value absolute or relative and z-index value other than auto.

Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop).

Element that is a child of a flex (flexbox) container, with z-index value other than auto.

Element that is a child of a grid (grid) container, with z-index value other than auto.

Element with a opacity value less than 1 (See the specification for opacity).

Element with a mix-blend-mode value other than normal.

Element with any of the following properties with value other than none:

transform

filter

perspective

clip-path

mask / mask-image / mask-border

Element with a isolation value isolate.

Element with a -webkit-overflow-scrolling value touch.

Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).

Element with a contain value of layout, or paint, or a composite value that includes either of them (i.e. contain: strict, contain: content).

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.

Using css mix-blend-mode with a child of a position fixed element

1 Answers1

Linked