Я знаю, что это было проблемой в течение долгого времени для многих, включая меня самого. Я читал о людях, которые решают свои проблемы, а другим не повезло.
У меня есть оверлей, вызванный сменой класса при нажатии кнопки. Следовательно, у него есть стили вне холста и в стиле холста, как вы можете видеть ниже
#menu-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
height: 100%;
background-color: rgba(0,0,0,.4);
z-index: 10 !important;
animation: none;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
transition: transform 800ms;
-webkit-transition: -webkit-transform 800ms;
transition: all 800ms;
}
.menu-is-open #menu-overlay {
-webkit-transform: translateX(0%);
transform: translateX(0%);
transition: transform 5000ms;
-webkit-transition: -webkit-transform 800ms;
transition: all 800ms;
}
Эти переходы, как вы можете видеть выше, позволяют элементу наложения скользить и выходить из поля зрения. Он отлично работает на любом устройстве и браузере, кроме Chrome на iOS. Вместо плавной анимации происходит прямой переход из выключенного состояния во включенное. Я слышал много теорий, чтобы решить эту проблему, но мне никогда не удавалось найти конкретное решение. Есть ли решение? Просто кажется, что Chrome iOS плохо работает с переходами и преобразованиями CSS.
Буду признателен за любую помощь с этим