Как остановить мерцание перехода CSS в мобильной навигации

Я создал Codpen Pen, показывающий проблему, с которой я столкнулся. Когда вы измените размер браузера на медиа-запрос, в данном случае ‹600px, вы увидите вспышку «переключенной» мобильной навигации вне холста, что делает изменение размера неудобным и неудобным для пользователя.

Проблема заключается в переходе на строку 28:

@include transition(all .25s linear);

Если я удалю эту строку, это решит все проблемы, но удалит переход, который противоречит цели мобильной навигации (он превращает плавную навигацию в неуклюжую вещь, которую я не хочу). Как я могу это исправить? Я уже пробовал:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Буду признателен за любую помощь!


css sass css-transitions bourbon
person Zach Russell    schedule 28.12.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

демо — http://codepen.io/anon/pen/vEXaVP

Вместо использования transform:translateX используйте left

.sliding-menu-content {
    left:-220px;
}

&.is-visible {
    left:0px;
}
person Vitorino fernandes    schedule 28.12.2014
comment
Вау, ты потрясающий. Итак, есть одна последняя проблема. Это трудно заметить в демо, но я ясно вижу это в своей среде разработки. Фон мерцает так, как это было бы в состоянии наведения. Я изменил фон вашей демонстрации, чтобы показать вам codepen.io/wptemple/pen/NPROGM. - person Zach Russell; 28.12.2014
comment
На самом деле это вызывает еще одну проблему: переключатель больше не работает на мобильных устройствах. Есть идеи, почему @vitorinofernandes? - person Zach Russell; 28.12.2014