1

I'm currently running into an issue using css filter. When used on a div that contains a div with position: fixed, the child element will suddenly get positioned relative to the parent with the filter.

With the following code I see the elements positioned the way I want them to be:

HTML

<div class="blurred">
  I'm blurred
  <div class="something-fixed">
    I'm fixed
  </div>
</div

CSS

.blurred {
  margin: 10% 20%;
  border: 1px solid black;
  /* filter: blur(2px); */
}

.something-fixed {
  position: fixed;
  top: 0;
  left: 0;
  background: red;
}

RESULT

enter image description here

However when applying a filter, for instance blur, the position: fixed seems to be ignored:

enter image description here

What exactly is causing this behaviour and how can I fix it?

I've created a codepen to demonstrate the behaviour here

Chantal
  • 959
  • 2
  • 12
  • 24
  • same issue happen with transform : https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children – Temani Afif Oct 15 '18 at 10:15
  • @TemaniAfif It's the same indeed thanks! Putting the filter on the html tag won't work for me though – Chantal Oct 16 '18 at 07:14

0 Answers0