Ошибка перевода CSS в Firefox - PullRequest
Новая
       36

Ошибка перевода CSS в Firefox

0 голосов
/ 30 августа 2018

Я столкнулся со странной ошибкой в ​​Firefox. У меня есть боковое меню со статическим положением.

Когда я в формате смартфона, это меню исчезает после выбора пункта меню. Меню скользит влево и исчезает. Тогда у меня есть кнопка назад, чтобы сделать обратное действие.

Он отлично работает с Chrome, но в Firefox, когда я нажимаю кнопку «Назад», меню сдвигается вправо, и некоторые элементы страницы остаются видимыми над меню, пока CSS translateX не завершит работу. Затем эти элементы правильно спрятаны за меню.

Свойство z-index установлено правильно. Ошибка появляется только во время перевода.

См. Скриншот ниже (кнопка «Назад», значки и цена не должны быть выше меню):

https://i.stack.imgur.com/Y2X8M.png

Структура страницы выглядит следующим образом: 

<div>
    <aside id="menu">
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </aside>
    <div id="page">
    Lorem ispum dolor sit amet
    </div>
</div>

Стиль бокового меню (React JSS): 

aside: {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  zIndex: 10,
  backgroundColor: 'white',
  width: '100%',
  transition: 'transform .7s',
  '&.hidden': { transform: 'translateX(-105%)' }
}

Есть идеи?

Обновление: Я попытался изменить translateX с помощью свойства left. Я сохранил переход, но поместил его в левую собственность. Работает отлично. Но я не понимаю, почему переводчик вызывает эту ошибку в Firefox

1 Ответ

0 голосов
/ 30 августа 2018

Используйте это - 

aside: {
 position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  zIndex: 10,
  backgroundColor: 'white',
  width: '100%',
  '-webkit-transition': '-webkit-transform 0.7s',
  '-moz-transition': '-moz-transform 0.7s',
   transition: 'transform 0.7s',
  '&.hidden': { '-webkit-transform': 'translateX(-105%)',
                '-moz-transform': 'translateX(-105%)',
                transform: 'translateX(-105%)' }
}
...