SVG blocking clicking events in Safari (for windows) but works in Firefox/Chrome

Question

I'm using raphael.js to do some background animating in my app (http://projectmusicquest.appspot.com/static/test.html). The issue I initially had was making sure the svg was in the background while my elements and the youtube video were in the foreground. I'm not aware of any differences between Safari and Chrome/Firefox that would cause this. Thanks!

UPDATE: I was sort of able to solve this by just setting the x-index of the svg to be below 0. I lost a little functionality, but I wasn't able to find another way.

Answer 1

You can place in your CSS svg {pointer-events: none;}.