Skip to content

Instantly share code, notes, and snippets.

@jhonsore
Forked from rcmachado/remove_hover_rule.js
Created May 18, 2016 13:01
Show Gist options
  • Save jhonsore/dc617c2e3e3174bdc0815429cf7f61d3 to your computer and use it in GitHub Desktop.
Save jhonsore/dc617c2e3e3174bdc0815429cf7f61d3 to your computer and use it in GitHub Desktop.
Remove CSS :hover rules for touch devices to avoid iOS double-tap behavior. Copied and adapted from http://retrogamecrunch.com/tmp/hover (just a fix for sheet.cssRules)
// disable :hover on touch devices
// based on https://gist.github.com/4404503
// via https://twitter.com/javan/status/284873379062890496
// + https://twitter.com/pennig/status/285790598642946048
// re http://retrogamecrunch.com/tmp/hover
// NOTE: we should use .no-touch class on CSS
// instead of relying on this JS code
function removeHoverCSSRule() {
if ('createTouch' in document) {
try {
var ignore = /:hover/;
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (!sheet.cssRules) {
continue;
}
for (var j = sheet.cssRules.length - 1; j >= 0; j--) {
var rule = sheet.cssRules[j];
if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText)) {
sheet.deleteRule(j);
}
}
}
}
catch(e) {
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment