animation-fill-mode breaks position fixed

Question

I have an element, that appears in the page with fade-in animation. Element has an overlay on the whole page when it is clicked (something like modal). It works fine in every browser except Firefox.

Removing animation-fill-mode: both fixes the problem, but I need this property.

const element = document.getElementById('element');
let isClicked = false;

element.addEventListener('click', handleClick, false);

function handleClick() {
 if (isClicked) {
   element.classList.add('isVisible');
  } else {
   element.classList.remove('isVisible');
  }
  
  isClicked = !isClicked;
}

.element {
  width: 200px;
  height: 40px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation-delay: 100ms;
  animation-timing-function: ease;
  animation-duration: 200ms;
  animation-name: fadeIn;
  /* animation-fill-mode: both; */
}

.isVisible {
 ::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: tomato;
    z-index: -1;
    animation-timing-function: ease;
    animation-duration: 300ms;
    animation-name: fadeIn;
  } 
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="element" id="element">
  <p>
    element
  </p>
</div>

in firefox positon fixed works like absolutly positioned element in relatively positoned — Kirill Panyushin, Jul 22 '19 at 11:19
share a complete *valid* code including the the definition of the animation — Temani Afif, Jul 22 '19 at 11:38
try giving it a z-index, 1 will probably do. I have this vague recollection of that helping (maybe?) — Carol McKay, Jul 22 '19 at 11:57
https://jsfiddle.net/52svajdc/1/ . I commented aniamation-fill-mode and overlay covers whole screen, but when prop is uncommented overlay covers only button — Kirill Panyushin, Jul 22 '19 at 12:19
remove the last transform from the animation: https://jsfiddle.net/7w0dqtc1/ — Temani Afif, Jul 22 '19 at 12:23

score 0 · Answer 1 · answered Jul 22 '19 at 11:26

0

Please add animation delay for that.. it will may be work.

css

.element {
    animation-delay: 1s;
}

answered Jul 22 '19 at 11:26

Manikandan2811

831
4
9

I have a delay, it doesn't matter in this case – Kirill Panyushin Jul 22 '19 at 11:59

animation-fill-mode breaks position fixed

1 Answers1