在 Safari 浏览器过渡期间放错位置的元素

Question

我创建了一个汉堡菜单动画，将汉堡包变成了圆圈中的箭头。它在chrome，firefox和opera中效果很好，但在safari中，变成圆形的元素在过渡期间会放错位置。过渡后，将其放置在正确的位置。我找不到为什么会发生这种情况的原因。下面是带有动画的代码：

let navicon = document.querySelector('#navicon');
navicon.addEventListener('click', toggleMenu, false);
function toggleMenu(event) { 
navicon.classList.contains('clicked')
? navicon.classList.remove('clicked')
: navicon.classList.add('clicked');
}

.navicon {
width: 20px;
height: 15px;
position: absolute;
top: 30px;
left: 50%;
display: inline-block;
transition: all 300ms ease;
cursor: pointer;
z-index: 101;
}
.navicon .line {
position: absolute;
width: 100%;
height: 3px;
left: 50%;
transform: translateX(-50%);
background-color: #000;
transition: all 300ms ease;
}
.navicon .ham {
top:40%;
background-color: transparent;
box-shadow: 0 0 0px 3px #000 inset;
box-sizing: border-box;
transform: translateX(-50%);
}
.navicon .bun--top {
top:0
}
.navicon .bun--bottom {
top:80%;
border-color: #000;
}
.navicon.clicked {
top: 23px;
right: 10px;
width: 30px;
height: 30px;
transform: rotate(180deg);// Makes reverse animation different
}
.navicon.clicked .ham {
top:50%;
left: 50%;
height: 100%;
width: 100%;
border-radius: 50%;
transform: translate(-50%, -50%) rotate(135deg);
box-shadow: 0 0 0px 2px #000 inset;
}
.navicon.clicked .bun {
top:50%;
width: 10px;
}
.navicon.clicked .bun--top {
transform: translate( -4px, -50%);
height: 3px;
}
.navicon.clicked .bun--bottom {
background-color: transparent;
transform: translate(-8px, -4px);
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 4px solid #000;
border-bottom: 4px solid transparent;
}

<div id="navicon" class="navicon">
<div class="line bun bun--top"></div>
<div class="line ham"></div>
<div class="line bun bun--bottom"></div>
</div>

Answer 1

似乎Safari 会按顺序渲染您的动画，而不是正确组合它们。只要骗他做一个动画

let navicon = document.querySelector('#navicon');
navicon.addEventListener('click', toggleMenu, false);
function toggleMenu(event) { 
navicon.classList.contains('clicked')
? navicon.classList.remove('clicked')
: navicon.classList.add('clicked');
}

.navicon {
width: 20px;
height: 15px;
position: absolute;
top: 30px;
left: 50%;
display: inline-block;
transition: all 300ms ease;
cursor: pointer;
z-index: 101;
}
.navicon .line {
position: absolute;
width: 100%;
height: 3px;
left: 50%;
transform: translateX(-50%);
background-color: #000;
transition: all 300ms ease;
}
.navicon .ham {
top:40%;
background-color: transparent;
box-shadow: 0 0 0px 3px #000 inset;
box-sizing: border-box;
transform: translateX(-50%);
}
.navicon .bun--top {
top:0
}
.navicon .bun--bottom {
top:80%;
border-color: #000;
}
.navicon.clicked {
top: 23px;
right: 10px;
width: 30px;
height: 30px;
transform: rotate(180deg);// Makes reverse animation different
}
.navicon.clicked .ham {
top:0%;
left: 0%;
height: 100%;
width: 100%;
border-radius: 50%;
transform: translate(0%, 0%) rotate(135deg);
box-shadow: 0 0 0px 2px #000 inset;
}
.navicon.clicked .bun {
top:50%;
width: 10px;
}
.navicon.clicked .bun--top {
transform: translate( -4px, -50%);
height: 3px;
}
.navicon.clicked .bun--bottom {
background-color: transparent;
transform: translate(-8px, -4px);
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 4px solid #000;
border-bottom: 4px solid transparent;
}

<div id="navicon" class="navicon">
<div class="line bun bun--top"></div>
<div class="line ham"></div>
<div class="line bun bun--bottom"></div>
</div>