CODEWITHSUNDEEP
csssafaricss-transitionstransform
Arsengael
Arsengael

Reputation: 25

Elements misplaced during transition on safari

I created a hamburger menu animation which changes the hamburger into an arrow in a circle. It works great in chrome, firefox and opera, but in safari the element which turns into circle gets misplaced during transition. After transition it is placed in right position. I can't find a reason why is this happening. Here is a code with the animation:

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>

Upvotes: 0

Views: 71

Answers (1)

Victor Radu
Victor Radu

Reputation: 2300

seems Safari renders your animations sequential, not properly combining them. Just trick him into one animation

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>

Upvotes: 1

Related Questions