Fix delegated click event not being triggered on elements without a c…

…ursor pointer on Mobile Safari
dieulot · Mar 19, 2017 · aea0438 · aea0438
1 parent f119a06
commit aea0438
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/instantclick.js b/src/instantclick.js
@@ -920,7 +920,17 @@ var instantclick
           element = element.parentNode
         }
       }, false) // Third parameter isn't optional in Firefox < 6
+
+      if (type == 'click' && /iP(?:hone|ad|od)/.test($userAgent)) {
+        // Force Mobile Safari to trigger the click event on document by adding a pointer cursor to body
+
+        var styleElement = document.createElement('style')
+        styleElement.setAttribute('instantclick-mobile-safari-cursor', '') // So that this style element doesn't surprise developers in the browser DOM inspector.
+        styleElement.textContent = 'body { cursor: pointer !important; }'
+        document.head.appendChild(styleElement)
+      }
     }
+
     if (!(selector in $delegatedEvents[type])) {
       $delegatedEvents[type][selector] = []
     }

diff --git a/src/loading-indicator.js b/src/loading-indicator.js
@@ -23,7 +23,7 @@
     }
 
     var styleElement = document.createElement('style')
-    styleElement.setAttribute('instantclick', '') // So that this style element doesn't surprise developers in the browser DOM inspector.
+    styleElement.setAttribute('instantclick-loading-indicator', '') // So that this style element doesn't surprise developers in the browser DOM inspector.
     styleElement.textContent = '#instantclick {pointer-events:none; z-index:2147483647; position:fixed; top:0; left:0; width:100%; height:3px; border-radius:2px; color:hsl(192,100%,50%); background:currentColor; box-shadow: 0 -1px 8px; opacity: 0;}' +
                                '#instantclick.visible {opacity:1; ' + vendorPrefix + 'animation:instantclick .6s linear infinite;}' +
                                '@' + vendorPrefix + 'keyframes instantclick {0%,5% {' + vendorPrefix + 'transform:translateX(-100%);} 45%,55% {' + vendorPrefix + 'transform:translateX(0%);} 95%,100% {' + vendorPrefix + 'transform:translateX(100%);}}'