javascript - Overflowing svg elements in some versions of webkit not working properly -

javascript - Overflowing svg elements in some versions of webkit not working properly -

i've made illustration show issue, appears in non-recent versions of chrom(e/ium) , still appear in recent versions of safari. i've tried accomplish in several revisions, still same result. cant have negative y value overflows svg element (or div parent of svg element) without overflow part losing hover/click actions. nor can accomplish css transform (or transform attr on element).

hover on top part of svg rect object in safari or older chrome versions see issue. believe bug within webkit, , safari may not have new changes webkit yet. there way work around bug? seems in scenarios svg's objects overflow svg.

elements:

<div id="main"> <div></div> <svg width="105" height="105"> <g> <rect width="105" height="105"></rect> </g> </svg> </div>

css (from rev 7):

#main, #main svg, #main svg g{ overflow:visible; } #main svg g{ transform:translate(0,-20px); -webkit-transform: translate(0,-20px); -webkit-transform-origin:50% 50%; }

http://jsfiddle.net/c7p14x2w/1/

http://jsfiddle.net/c7p14x2w/2/

http://jsfiddle.net/c7p14x2w/3/

http://jsfiddle.net/c7p14x2w/4/

http://jsfiddle.net/c7p14x2w/7/

more simplified version without parent elements still doesnt work: http://jsfiddle.net/nu5m6/74/

javascript css svg