Не работает свойство transition на мобильных устройствах?

Question

[Ilexa]

Есть бургер через chekbox в шапке сайта, при нажатии на кнопку все, что принадлежит классу btn анимируется плавно со свойством transition и на пк и мобильном устройстве(на айфоне в safari и chrome), но вот сам блок с пунктами меню, которому указано свойство top: -100% изначально, на пк возвращается плавно при нажатии кнопки, а на телефоне нет, уже что только не пробовал.(

Код: https://codepen.io/ilexa13/pen/QWmWEBO

Вижу, что похожий вопрос https://qna.habr.com/q/849825 уже был, но ответ я там не нашел.

Comments

[wadowad]

Пример работает плавно и в эмуляторе и на телефоне. В каком браузере не работает?

[Ilexa]

wadowad, проверял в safari и chrome, на андроиде нет возможности проверить.

[wadowad]

Ilexa, видимо это баг ios. Попробуйте заменить анимацию свойства top, на свойство transform(translate(0, -100px)).

Answer 1

[Ilexa]

Нашел большое количество вопросов похожих на мой, но все они были оставлены без ответа. Префиксы именно здесь не помогли, но на всякий случай уже подключил автопрефиксер. В данном случае на айфоне не работала анимация возврата меню из-за того, что для блока с пунктами меню в свойстве top: -100%; значение было указано в процентах, тогда как при нажатии на кнопку было объявлено это свойство со следующим значением top: 0;
Протестил несколько раз с префиксами и без, все стало плавно работать только с процентным значением в свойстве top: 0%;

Comments

[Сергей delphinpro]

IE умер. Да здравствует Safari!

Answer 2

[gogowq]

Я бы попробовал добавить условно такое -

-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
 -o-transition: transform 0.6s ease-out;

Comments

[Ilexa]

Добавил это, но к сожалению не сработало.

-webkit-transition: transform  all 0.25s ease 0s;
  -o-transition: -webkit-transform all 0.25s ease 0s;
  -moz-transition: transform  all 0.25s ease 0s;
  transition: all 0.25s ease 0s;