SVG events in Safari vs FF3/Opera

So don't get me wrong... FF3 is awesome, but when it comes to rendering HTML/SVG/JavaScript... I think WebKit kicks Gecko's butt! So recently while doing some R&D, where I wanted to layer 2 SVG containers on top of each other, I noticed that the events actually work differently. So check out this sample.

So this is a really simple test page. The code essentially creates and adds an svg element (z-index:0) to the root div. To this new surface, a rectangle is added to it. Next an image to the root div (z-index:1). Finally another svg element (z-index:2) is created and added to the root div and a circle added to it.

Now to test this out, make sure to have Safari/WebKit's console open and in Firefox, Firebug. Click on the 'green rect', 'image', the 'red circle' & finally the 'white background' div.

In Safari, the output looks like:

rect : rect
IMG : image
circle : circle
DIV : div

Where as in Firefox (and Opera)

svg : surface2
svg : surface2
circle : circle
svg : surface2

So basically you can see that, since the 2nd surface is above in z-ordering, it traps all events outside the itself and doesn't let it go through. But Safari seems to have a different algorithm for determining the event source/target. Googling around, I have not been able to find more details on how the each rendering engine determines the event source/target.