1

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?

Community
  • 1
  • 1
tarleb
  • 19,863
  • 4
  • 51
  • 80

1 Answers1

0

There is no easy answer to this question, just varying levels of bugginess in browsers (though it mostly works nowadays).

The fancybox behavior seems to be caused by a jQuery bug which only occurs in certain browsers. It can be fixed with an simple pointer-events: none.

Understanding the behavior in details doesn't buy one much. It's useful to know about how to work around these issues (add a image filling path like shown in the question). The rest are browser implementation details and not worth the pain for most people.

tarleb
  • 19,863
  • 4
  • 51
  • 80