CODEWITHSUNDEEP
javascripthtmlsvgsafari
Makubex
Makubex

Reputation: 73

Safari Zero height SVG path not trigger mouse event

SVG PATH with 2 vertices with no stroke, have the same y coordinates is not responding to mouseevent in Safari only.

Notice that the y-coordinates of the endpoint vertices are the same:

<div class="container">
    <section class="ui-interactable-content" style="transform: scale(1); width: 100%; height: 100%;"><svg class="path-selection-svg">
        <path class="path-selection-svg-path" d="M 4 4 L 92.99999999999994 4"></path>
        <path class="path-selection-svg-shape" d="M 4 4 L 92.99999999999994 4"></path>
        </svg>
    </section>
</div>

The effect is reproduced here: http://jsfiddle.net/mf6ueqef/

This works fine in chrome, IE, FF.

Any one know how to resolve this?

Upvotes: 1

Views: 65

Answers (1)

Makubex
Makubex

Reputation: 73

I found the issue. Looks like Safari does not respond to pointer events when a path has end points' y-coordinates to be the same, and that the stroke is none.

The fix is simple: Simply make the stroke non-none

stroke: rgba(255,0,0,0.01);

Upvotes: 1

Related Questions