我做了一个小菜单，其中一个形状将其height和width转换并变形为所悬停的链接容器的尺寸。本质上，在进行转换时，形状应保持沿菜单容器的X轴居中。
虽然Safari在Chrome和Firefox上可以完美运行，但Safari（当然）存在一个问题，即形状在转换期间会偏离中心，然后在转换完成后立即恢复到居中状态。我了解到，如果形状的height属性不变，则不会执行此操作，但是显然我需要更改高度。显然，这与元素height发生更改时Safari如何呈现转换有关，而不是全局CSS / JS问题。
是否存在针对此类问题的已知解决方案？
这里是工作中的Fiddle。在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>