Bug 150274
| Summary: | SVG text's transparent box overlaps clickable shape, disabling click | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Tobi Reif <tobi> |
| Component: | New Bugs | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | graouts |
| Priority: | P2 | ||
| Version: | Safari 9 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Tobi Reif
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 .
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Antoine Quint
*** This bug has been marked as a duplicate of bug 150838 ***
Tobi Reif
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>