Проблема CSS-преобразования при настройке высоты элемента в Safari

Question

Я создал небольшое меню, в котором фигура преобразует и превращает свои height и width в размеры контейнера ссылок, над которым находится. По существу, форма должна оставаться центрированной вдоль оси X контейнера меню во время преобразования.

Хотя он отлично работает в Chrome и Firefox, в Safari (конечно) есть проблема, заключающаяся в том, что фигура будет смещаться от центра во время преобразования, а затем сразу же возвращаться к центру после завершения преобразования. Я узнал, что этого не происходит, если свойство height формы не изменяется, но, очевидно, мне нужно изменить высоту. Кажется довольно ясным, что это связано с тем, как Safari отображает преобразования при изменении элемента height, а не с глобальной проблемой CSS / JS.

Есть ли известное исправление для такого рода проблемы?

Вот рабочая Скрипка . Проверьте это в Safari и Chrome / Firefox, чтобы понять, что я имею в виду.

// Sitewide DOM references
var $html_body = $('html, body'),
    $body			 = $('body'),
    $document	 = $(document),
    $window		 = $(window);

var $menu			 = $('.nav-menu'),
    $linksCtnr = $menu.find('.nav-links'),
    $linkCtnr  = $menu.find('.link-container'),
    $shape		 = $menu.find('.hover-shape');

// Mouseenter handler
$linkCtnr.on('mouseenter', function() {

  var $this	= $(this),
      h			= $this.outerHeight(),
      w			= $this.outerWidth(),
      x			= $this.position().left;

  // Set position and size of shape to hovered element
  $shape.css({
    height: h,
    opacity: 1,
    transform: 'translate3d(' + x + 'px,-50%,0) scale(1)',
    transition: '0.55s cubic-bezier(.19, 1, .22, 1.04)',
    width: w
  }).attr('data-x', x);

});

// Mouseleave handler
$linksCtnr.on('mouseleave', function() {

  var x = parseFloat($shape.attr('data-x'));

  $shape.css({
    opacity: 0,
    transform: 'translate3d(' + x + 'px,-50%,0) scale(0.5)',
    transition: '0.55s cubic-bezier(.19, 1, .22, 1.04)'
  });
});

// Mouseclick handler
$linkCtnr.on('click', function(e) {

  var $this = $(this),
      url		= $this.attr('href'),
      x 		= parseFloat($shape.attr('data-x'));

  e.preventDefault();

  $linkCtnr.on('mouseenter mouseleave', function() {
    console.log('Bitch');
  });

  $shape.css({
    opacity: 0,
    transform: 'translate3d(' + x + 'px,-50%,0) scale(1.4)',
    transition: '1.4s cubic-bezier(0,.9,.1,1)'
  });

  // Go to link after 600ms to let animation show
  // setTimeout(function() {
  // 	window.location = url;
  // }, 800);

});

a {
	 text-decoration: none;
}
 * {
	 font-family: 'Roboto', sans-serif;
}
 .max-width {
	 max-width: 1200px;
}
 .center {
	 margin: 0 auto;
}
 .flex-center {
	 align-items: center;
	 display: flex;
	 justify-content: center;
}
 .flex-center.vertical {
	 flex-direction: column;
}
 .flex-center.wrap {
	 flex-wrap: wrap;
}
 .padding {
	 padding: 0 20px;
}
 nav {
	 color: #7688ad;
	 height: 70px;
	 overflow: hidden;
}
 nav .center, nav .nav-menu {
	 height: 100%;
}
 nav .nav-links {
	 align-items: center;
	 display: flex;
	 height: 100%;
	 justify-content: center;
	 position: relative;
}
 nav .link-container {
	 display: block;
	 padding: 12px 25px;
	 position: relative;
	 z-index: 2;
}
 nav .link-container.logo {
	 padding: 12px;
}
 nav .link-container:hover .link-text {
	 color: white;
}
 nav .link-container:hover svg {
	 fill: white;
}
 nav svg {
	 display: block;
	 fill: #7688ad;
	 height: 30px;
	 transition: 0.3s;
	 width: 30px;
}
 nav .link-text {
	 color: #7688ad;
	 display: block;
	 font-size: 16px;
	 font-weight: bold;
	 letter-spacing: 0.2em;
	 line-height: 0.8em;
	 text-align: center;
	 text-indent: 0.2em;
	 text-transform: uppercase;
	 transition: 0.3s;
}
 nav .hover-shape {
	 background: #4985ff;
	 border-radius: 400px;
	 height: 36px;
	 left: 0;
	 opacity: 0;
	 pointer-events: none;
	 position: absolute;
	 top: 50%;
	 transform: translateY(-50%) scale(0.5);
	 transform-origin: center;
	 transition: 0.55s cubic-bezier(0.19, 1, 0.22, 1.04);
	 width: 96px;
	 z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="center max-width">
    <div class="nav-menu padding flex-center">
      <ul class="nav-links">
      <div class="hover-shape"></div>
        <a href="#" class="link-container">
          <span class="link-text">About</span>
        </a>
        <a href="#" class="link-container">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
            <path d="M32,0S21,.94,20.54,18.4V80L2.44,77.36V19.71S2.15,11,7.7,5.59a12.31,12.31,0,0,1,5.84-3.13ZM76.29,70.52a6.42,6.42,0,0,1-4.1-2.46L41.4,28.64A3.56,3.56,0,0,0,39,27.21c-1.32.05-2.21.49-3.23,2.34a8.43,8.43,0,0,0-.71,3.3l0,10,19.43,23a8.2,8.2,0,0,0,3.79,2.83,8.79,8.79,0,0,0,1.15.23ZM60.52,30.17,73.09,47.62c1.24,1.7,2.56.78,2.56.78,1.95-1.24,1.91-4.66,1.91-4.66V7.17l-17,1.59Z"/>
          </svg>
        </a>
        <a href="#" class="link-container">
          <span class="link-text">Work</span>
        </a>
      </ul>
    </div>
  </div>
</nav>