Кнопка «гамбургер» на iPhone плохо работает. Сайт сделан с помощью Elementor Pro. ⇐ CSS

[Anonymous]

Я создал сайт с помощью Elementor Pro. Я сделал меню с кнопкой-гамбургером. Когда я нажимаю на него на своем телефоне Android, он открывается нормально. Когда я использую iPhone с инструментами разработчика, он тоже работает.
Но физический iPhone работает не очень хорошо. У меня есть видео, чтобы показать это.
Я не могу отправить видео сюда, поэтому пришлю скриншот проблемы.
Это рассматриваемый сайт:

Код: Выделить всё

https://mindandnoor.com

Я пытался скопировать это в часть «пользовательский CSS» кнопки гамбургера:

Код: Выделить всё

.burger-icon div {
width: 100%;
height: 3px;
background-color: #fff;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out; /* Safari-specific */
}

.menu-overlay.open .burger-icon div:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
-webkit-transform: rotate(45deg) translate(5px, 5px);
}

.menu-overlay.open .burger-icon div:nth-child(2) {
opacity: 0;
}

.menu-overlay.open .burger-icon div:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
-webkit-transform: rotate(-45deg) translate(5px, -5px);
}

.menu-overlay.open {
-webkit-transform: translateZ(0);
will-change: transform;
}

Но это все равно не работает..

Подробнее здесь: https://stackoverflow.com/questions/792 ... mentor-pro