simple css animation not smooth in Safari

Question

I have a weird behaviour on a website in Safari. I want to expand a menu from height 0px to height 100% with a css transition. This works properly in Firefox, Chrome and Edge. However, in Safari, there is always a breakpoint where the animation stops for a really short period, causing a laggy animation. I checked that no element is on the same z-index. I found a "fix" on a homepage, which is indicated by a comment in the css, but that does not changes anything.

.dropdown-nav{
  position: fixed;
  display: block;
  z-index: 21;
  width: 100%;
  height: 0;
  left: 0;
  background-color: white;
  top: 0;
  padding: 0;
  transition: height 0.6s ease-out;
  -webkit-transition: height 0.6s ease-out;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  /* Enable hardware acceleration to fix laggy transitions */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.dropdown-nav-visible{
  height: 100%;
}

In my js-script, I simply toggle the class .dropdown-nav-visible onto the .drop-down-nav

$('#nav-icon4').click(function(e){
  e.preventDefault();
  $(".dropdown-nav").toggleClass("dropdown-nav-visible");
  $(this).toggleClass('open');
});

Here you find the laggy behaviour: https://magnavoce.ch and here the same setup, but it works: http://dev5.raphael-rapior.com/.

I also tried using animation-duration like suggested in a similiar question on SO. I also tried removing every other part of the site, still the same.

Edit: safari 9 seems to not have this problem, but safari 12

Answer 1

Height transitions are heavy (they recalculate too many things at each frame), if possible you should use transform instead. Other than that, you may try to add will-change: height

ex:

.myNav {
transform: translateY(-100%);
transition: transform 0.15s;
}

.myNavActive {
transform: translateY(0%);
}