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

Question

[Роман Дубинин]

Пожалуйста, если не знаете ответ на вопрос, всё равно откройте пример, включите параллакс и отпишитесь, остается ли 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-битный, но какая версия стояла, не помню. Возможно в более старой версии пример будет работать, а возможно у меня просто комп глючит, так что отпишитесь в комментах хотя бы о том, отображается ли у вас пример...

Comments

[alvvi]

SVG не дружит с 3D трансформациями

[Роман Дубинин]

Илья Ростопка, Звучит как-то обреченно... Хотите сказать, что это и не должно работать?

[alvvi]

Роман Дубинин, в спеке SVG этого нет, насколько я знаю, а значит во всех браузерах это будет работать по-разному, что вы и можете наблюдать.

[DEFUNK]

55.0.3 macos , работает, но обрезается. С выключенным overflow: visible работает корректно. Может все-таки svg вынести за пределы wrapper?

[Роман Дубинин]

DEFUNK, спасибо! Вынесение за wrapper ничего не даёт, у меня по прежнему всё проподает при overflow: visible у svg.