150274 2015-10-17 02:36:30 -0700 SVG text's transparent box overlaps clickable shape, disabling click 2016-04-17 04:44:53 -0700 1 1 1 Unclassified WebKit New Bugs Safari 9 Unspecified Unspecified RESOLVED DUPLICATE 150838 P2 Normal --- 1 tobi webkit-unassigned graouts oldest_to_newest 1134173 0 tobi 2015-10-17 02:36:30 -0700 Steps to reproduce the problem: Load http://codepen.io/TobiReif/pen/ghELn in Safari 9. Click on the right or left circle -> animation starts. Click on the center circle -> animation doesn't start. What is the expected behavior? Clicking on the center circle should start the animation. (Works in FF, doesn't work in Safari & Chrome.) What went wrong? Click on the center circle -> animation doesn't start. Also see https://code.google.com/p/chromium/issues/detail?id=424273 . 1139091 1 graouts 2015-11-03 14:37:31 -0800 *** This bug has been marked as a duplicate of bug 150838 *** 1184463 2 tobi 2016-04-17 04:44:53 -0700 This works now in the Safari preview. I deleted the pen. In case anyone needs to test this in the future, here's the code: <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 300 60"> <rect id="rect" x="10" y="5" width="20" height="20" fill="lime"> <animate attributeName="x" begin="circle1.click;circle2.click;circle3.click" dur="0.5s" from="100" to="10" fill="freeze"/> </rect> <circle id="circle1" cx="20" cy="37" r="5" fill="green"/> <circle id="circle2" cx="80" cy="37" r="5" fill="green"/> <circle id="circle3" cx="120" cy="37" r="5" fill="green"/> <text y="30" fill="olive" font-size="10"> <tspan x="40" dy="1em">Foo.</tspan> <tspan x="40" dy="1em">Foo bar baz.</tspan> </text> </svg>