romash
@romash
web-разработчик

Почему в Firefox перестаёт отображаться svg при определённых правилах css?

Пожалуйста, если не знаете ответ на вопрос, всё равно откройте пример, включите параллакс и отпишитесь, остается ли svg видимой и в каком браузере. Эта информация для меня уже будет полезной

На странице есть добавленный инлайном svg-элемент к которому применяется плагин parallax-js (создаёт параллакс эффект при движении мышки).
Сам svg заключён в блок с заданной шириной и высотой, но имеет некоторые элементы, выходящие за пределы рабочей области, в следствии чего у него стоит свойство overflow: visible;.
По какой-то причине в Mozilla Firefox overflow: visible; совместно с какими-то css-трансформациями, добавляемыми parallax-js полностью вырубают svg (он становится невидимым).

Вот пример, здесь в блоке .wrapper svg с кругом, который должен выходить за рамки. Можете нажать на кнопку и посмотреть (в хроме, как работает параллакс, а в firefox'e — как всё исчезает), либо раскомментировать добавляемые parallax-js строки css, которые я заботливо скопировал для вас :)

Windows 7, Firefox 56.0 (32 bit).
Примечание: до этого я работал на другом компьютере, там стояла win10 и фаерфокс 64-битный, но какая версия стояла, не помню. Возможно в более старой версии пример будет работать, а возможно у меня просто комп глючит, так что отпишитесь в комментах хотя бы о том, отображается ли у вас пример...
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы