Блог

Главная - Вопросы по программированию - Проблемы с межбраузерным переходом и преобразованием

Проблемы с межбраузерным переходом и преобразованием

#javascript #html #css #responsive-design

#javascript #HTML #css #адаптивный дизайн

Вопрос:

У меня возникли проблемы при создании моего нового веб-сайта.

У меня есть мобильная навигация, которая отображается всякий раз, когда ваш браузер достаточно мал (я полагаю, шириной менее 940 пикселей), и она отлично работает в Chrome и других браузерах webkit, но в Firefox и IE переходы не работают, и ничто не преобразуется так, как я хочу. Я не совсем уверен, почему это так, и мог бы воспользоваться помощью.

Вот ссылка на сайт:http://teamreest.com

РЕДАКТИРОВАТЬ: я использую префиксы конкретного поставщика, но это все еще не работает.

Более конкретно в связи с этим:

 .overlay{
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: $main-color;
  overflow: auto;
  z-index:100;
  font-size:50px;
  font-weight:300;
  min-height:400px;

  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: -transform 0.4s;

  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

.overlay.show {
  opacity:1;

  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

Также это: 

 .container{
  height:100%;
  opacity: 1;

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  transition: -transform 0.4s, opacity 0.4s;
}

.container.show {
  opacity: 0.5;

  -webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  transform: translateX(30%);
}

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

1. webkit используется только для браузеров safari и chrome, для ie преобразование и переход не будут работать, если версия ie ниже 9 и для последней версии ie используйте -свойства mos, а для firefox -свойства moz

2. Я использую правильные префиксы поставщика, но это все еще не работает.

3. можете ли вы опубликовать какой-нибудь код, который не работает

4. Переход в мобильное меню на веб-сайте при использовании браузера, отличного от webkit, — это то, что не работает должным образом. Минуточку, я приведу для вас несколько фрагментов.

5. Я добавил код в основной пост.

Ответ №1:

Я обнаружил проблему в своем коде.

Переход, как показано здесь:

   -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: -transform 0.4s;

И здесь: 

   -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  transition: -transform 0.4s, opacity 0.4s;

Являются проблематичными. Как видно, проблема с обычным свойством transition.
Эту проблему можно увидеть, поскольку перед свойством transform перехода стоит прочерк. Путем удаления этого проблема решена.