CODEWITHSUNDEEP
cssinternet-explorercss-animationsmicrosoft-edge
Exil
Exil

Reputation: 329

Strange CSS3 animation issue in IE11 and Edge

I made a CSS3 animation, it works well in Firefox and Chrome, but it behaves differently in IE11 and Edge.

I couldn't fix the issue because it's hard to debug CSS3 Animation using IE Developer Tools. This issue also occurs on Edge (But i think my Edge version is outdated so please try to reproduce this issue only in IE11. The fix will probably work on both).

Here is how i want the animation to look (Works on Chrome/Firefox):

enter image description here

Here is how it animates differently on IE11:

enter image description here

Code:

HTML:

<div class="block"></div>
<span>click</span>

CSS:

span {
  width: 50px;
  height: 50px;
  background: red;
  font-size: 50px;
}
.block {
  position: fixed;
  height: 0%;
  bottom: 0;
  width: 100%;
  top: auto;
  display: block;
  background-color: #0B0B0B;
  z-index: 99999;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

.animate-up {
    animation-name: overlayEffectUp;
  }


@keyframes overlayEffectUp {
  0% {
    bottom: 0;
    top: auto;
    height: 0%;
  }

  35%,
  65% {
    height: 100%;
  }

  100% {
    bottom: auto;
    top: 0;
    height: 0%;
  }
}

JavaScript (With jQuery):

$('span').on('click', function() {
    $('.block').addClass('animate-up')
})

Here is the Demo link: https://jsfiddle.net/zoq9h7xp/3/

Please, any help would be appreciated!

Upvotes: 0

Views: 720

Answers (1)

Jeroen W
Jeroen W

Reputation: 872

Edge seems to be buggy with position: fixed. Supposedly the switch between top: 0 and top: auto (and same story with the bottom property) causes this behaviour.

If you must maintain the fixed position, you can try to animate with the transform property. Change your rulesets as follow:

@keyframes overlayEffectUp {
    0% {
        transform: translateY(100%); // totally offscreen
    }

    35%,
    65% {
        transform: translateY(0%); // totally on screen from bottom
    }

    100% {
        transform: translateY(-100%); // totally off screen again to top
    }
}
.block {
    position: fixed;
    top:0;
    bottom:0;
    transform: translateY(100%);
    width: 100%;
    background-color: #0B0B0B;
    z-index: 99999;
    animation-fill-mode: both;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

Hope this helps. Cheers, Jeroen

Upvotes: 1

Related Questions