How does SVG click event handling differ between browsers?

I noticed that browser’s behavior is very inconsistent across implementations and operating systems.

E.g., When there is an icon withing a link,

<a href="faq.html" class="icn icn-faq">
    <svg version="1.1" role="img" aria-label="FAQ">
        <use xlink:href="/images/icons.svg#faq" />
    </svg>
</a>

which works regardless of where one clicks. However, if I add a (jQuery based) lightbox jQuery('a.icn-faq').fancybox({"content": "wat?"}), browser behaviour starts to differ. Clicks anywhere on the SVG cause the lightbox to appear in all browsers except for Safari, where it only works if one doesn’t hit a path.

I learned that I can fix this by adding a transparent rect, which gives me consistent browser behavior again.

<a href="faq.html" class="icn icn-faq">
    <svg version="1.1" role="img" aria-label="FAQ">
        <use xlink:href="/images/icons.svg#faq" />
        <rect width="100%" height="100%" fill="#fff" fill-opacity="0" />
    </svg>
</a>

I also know about pointer-events. Setting pointer-events: none for the SVG breaks click-events on OS X but doesn’t seem to affect Linux browsers

I’m lacking understanding of how it all fits together. What are the underlying principles which cause these differences?


Source: cross-browser

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.