css filter breaking positioning in Firefox

Question

Disclaimer:
I suppose this is related to this reported bug, and is quite similar to this other question but the fix suggested there does not apply.

If I have a div that is sticky, ie it has position: fixed; top: 0px;.
I would expect it to be attached/sticky in the top of the body/screen.

What I notice (only in Firefox) is that applying a filter to its parent will make the position adopt the parent element (the one I added the filter to) as the position: fixed; reference, not the body.

Example (https://jsfiddle.net/sz6xtfno/):

(notice the div.sticky changing position, when it should be fixed in Firefox)

// just for demo purpose:
const sticky = document.querySelector('.sticky');
const container = sticky.parentElement;
setTimeout(() => container.classList.add('add-filter'), 1000);

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}
.sticky {
  display: block;
  position: fixed;
  top: 0px;
}
.add-filter {
  -webkit-filter: sepia(10%) grayscale(60%);
  -moz-filter: sepia(10%) grayscale(60%);
  filter: sepia(10%) grayscale(60%);
}
div {
  background-color: #ddf;
  padding: 10px;
  margin: 0px;
  position: relative;
}

<div>
  <p>Previous element</p>
</div>
<div class="container">
  <p>This is the container</p>
  <div class="sticky">
    <p>This is a sticky element</p>
  </div>
</div>

Question:
How to correct this? I am looking for a solution without JavaScript since this issue seems to scramble positioning calculations.

Does the enclosing parent element have a coordinates system? I.e. "position=relative" or such? I've found that FF (at least in the past) wants the parent to have explicitly stated coordinates. This can be done on the `body` element or an enclosing `div`. Just a thought. — Peter Rowell, Feb 05 '17 at 06:41
@PeterRowell in my example I give `position: relative;` to all divs. — Sergio, Feb 05 '17 at 06:44
Sorry. It's late and I skimmed the example too quickly. Does adding `position=relative` to the `body` help? — Peter Rowell, Feb 05 '17 at 06:47
@PeterRowell no problem :) Added `position: relative;` to body and html and problem is still there. — Sergio, Feb 05 '17 at 06:50

score 0 · Answer 1 · answered Feb 05 '17 at 08:05

Strange behaviour... To solve the specific case - not the possible bug -, you can put your sticky div outside the container. If you want to filter it too, you just need to add the add-filter class to it.

<div>
  <p>Previous element</p>
</div>
<div class="sticky add-filter">
  <p>This is a sticky element</p>
</div>
<div class="container add-filter">
  <p>This is the container</p>
</div>

See this fiddle https://jsfiddle.net/4ba7g7ws/1/

css filter breaking positioning in Firefox

1 Answers1