[Solved]-Leaflet + D3 - No mouseover on Safari-d3.js

You might try implementing the following code into your D3.js JavaScript instead of using CSS:

var feature = g.selectAll("path")
        .data(collection.features)
    .enter().append("path").attr('style','z-index:9999')
    .on("mouseover", function() {
        d3.select(this).css("fill", "green").css("stroke", "red");
    })
    .on("mouseout", function() {
        d3.select(this).css("fill", "").css("stroke", "");
    });

I have found that using the JavaScript to apply styles has been much more efficient and easier to maintain than trying to use CSS to do so, unless you are specifically using classes. In which case, I would use the .classed() method (https://github.com/mbostock/d3/wiki/Selections#wiki-classed) to manage the adding and removal of classes.

Hope this helps! If not, sorry. :-/

EDIT 1

I edited to include the mouseout functionality. After looking into this more deeply, the Leaflet thing just pulls in new images, not redrawing an SVG, which is what D3.js does. My only guess is that Safari is ignoring the z-index of your path element. This is apparent whenever you right-click on the path area and then select Inspect Element from the dropdown. On Chrome, it will show you the HTML for the path element, but on Safari, it shows you the HTML for the image being pulled in by the Leaflet stuff.