Why does Firefox stop rendering svg under certain css rules?

Question

css

Please, if you do not know the answer to the question, open the example anyway, turn on parallax and unsubscribe whether the svg remains visible and in which browser. This information will already be useful for me.
On the page there is an svg element added inline to which the parallax-js plugin is applied (creates a parallax effect when the mouse moves).
The svg itself is enclosed in a block with a given width and height, but has some elements that extend outside the client area, as a result of which it has the . For some reason, in Mozilla Firefox , along with some css-transformations added by parallax-js , the svg is completely cut out (it becomes invisible). Here is an example , here in the blockoverflow: visible;
overflow: visible;
.wrappersvg with a circle that needs to go out of bounds. You can click on the button and see (in chrome how parallax works, and in firefox how everything disappears), or uncomment the css lines added by parallax-js
, which I carefully copied for you :) Windows 7, Firefox 56.0 (32 bit ).
Note: before that I worked on another computer, there was win10 and firefox 64-bit, but I don’t remember which version it was. Perhaps in an older version, the example will work, or maybe my computer is just buggy, so unsubscribe in the comments at least about whether your example is displayed ...