Блог

Главная - Вопросы по программированию - Преобразование поворот дублирующего элемента перед вращением на IOS

Преобразование поворот дублирующего элемента перед вращением на IOS

#css #safari

#css #safari

Вопрос:

У меня есть значок гамбургера в меню, который имеет преобразование: поворот после события щелчка. Это хорошо работает в Chrome, но в Safari я нахожу ошибку. Он отображает копию элемента, а затем поворачивает эту копию. После окончания анимации все выглядит нормально, ошибка видна во время анимации.

Как я могу это исправить?

введите описание изображения здесь

   $("#burger-menu-icon").click(function () {
    $(this).toggleClass("open");
  }); 
 body {
  background: #000;
}
.burger-menu {
  display: flex;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
}

.burger-menu__dash,
.burger-menu__dash::after,
.burger-menu__dash::before {
  width: 30px;
  height: 2px;
  background: #ffffff;
  transition: all 250ms ease-in-out;
  -webkit-transition: all 250ms ease-in-out;
}

.burger-menu__dash::after,
.burger-menu__dash::before {
  position: absolute;
  content: "";
}

.burger-menu__dash::after {
  transform: translateY(-10px);
}

.burger-menu__dash::before {
  transform: translateY(10px);
}

.burger-menu.open .burger-menu__dash {
  transform: translateX(-30px);
  background: transparent;
}

.burger-menu.open .burger-menu__dash::after {
  transform: rotate(45deg) translate(20px, -20px);
  -webkit-transform: rotate(45deg) translate(20px, -20px);
}

.burger-menu.open .burger-menu__dash::before {
  transform: rotate(-45deg) translate(20px, 20px);
  -webkit-transform: rotate(-45deg) translate(20px, 20px);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="burger-menu" id="burger-menu-icon">
    <div class="burger-menu__dash"></div>
  </div>
</div>

Комментарии:

1. Я запустил ваш фрагмент в Safari (IOS 15), и, похоже, никаких проблем нет (я тоже запускал его на более низкой скорости, чтобы было легче видеть, что происходит). Какую систему / версию вы используете?

2. Я протестировал это на IOS 15.1 и последней версии Safari. Вот фрагмент , в котором я воспроизвожу ошибку, как на изображении в посте

3. Итак, я вижу проблему, когда запускаю ваш codepen, но не когда я запускаю ваш фрагмент SO. Я думаю, нам нужно посмотреть, в чем разница в окружающей среде. Видите ли вы проблему, когда запускаете свой сниппет SO, а не свой codepen?

Метки: