disable :hover on touch devices

ionic/components/app/app.ts

@@ -340,6 +340,12 @@ function applyBodyCss(bodyEle, config, platform) {
   // ios
   bodyEle.classList.add(config.setting('mode'));
 
+  // touch devices should not use :hover CSS pseudo
+  // enable :hover CSS when the "hoverCSS" setting is not false
+  if (config.setting('hoverCSS') !== false) {
+    bodyEle.classList.add('enable-hover');
+  }
+
   /**
   * Hairline Shim
   * Add the "hairline" CSS class name to the body tag

ionic/components/app/typography.scss

@@ -34,7 +34,7 @@ a {
   color: $link-color;
   background-color: transparent;
 }
-a:hover,
+.enable-hover a:hover,
 a.hover {
   color: $link-hover-color;
 }

ionic/components/button/button.scss

@@ -63,13 +63,6 @@ button,
   background: $button-color;
   color: $button-text-color;
 
-  &:hover,
-  &.hover {
-    opacity: $button-hover-opacity;
-    color: $button-text-color;
-    text-decoration: none;
-  }
-
   &.activated {
     opacity: 1;
     background-color: $button-color-activated;
@@ -119,6 +112,16 @@ button,
 
 }
 
+.enable-hover button:hover,
+.enable-hover [button]:hover,
+button.hover
+[button].hover {
+  opacity: $button-hover-opacity;
+  color: $button-text-color;
+  text-decoration: none;
+  background: red !important;
+}
+
 a[button] {
   text-decoration: none;
 }

ionic/components/button/modes/material.scss

@@ -42,11 +42,6 @@ button,
   &[clear] {
     box-shadow: none;
 
-    &:hover,
-    &.hover {
-      background-color: $button-md-clear-hover-bg-color;
-    }
-
     &.activated {
       background-color: $button-md-clear-active-bg-color;
     }
@@ -87,6 +82,13 @@ button,
 
 }
 
+&.enable-hover button[clear]:hover,
+&.enable-hover [button][clear]:hover,
+button[clear].hover,
+[button][clear].hover {
+  background-color: $button-md-clear-hover-bg-color;
+}
+
 
 // Material Design Button Color Mixin
 // --------------------------------------------------

ionic/components/tabs/tabs.scss

@@ -78,11 +78,11 @@ ion-tab {
   border: 0;
   border-radius: 0;
   background: none;
+}
 
-  &:hover,
-  &.hover {
-    color: $tab-button-text-inactive;
-  }
+.enable-hover .tab-button:hover,
+.tab-button.hover {
+  color: $tab-button-text-inactive;
 }
 
 [tab-bar-icons="bottom"] .tab-button {

ionic/platform/registry.ts

@@ -50,6 +50,7 @@ IonicPlatform.register({
     mode: 'md',
     keyboardHeight: 290,
     keyboardScrollAssist: true,
+    hoverCSS: false,
   },
   isMatch(p) {
     return p.isPlatform('android', 'android|silk');
@@ -77,6 +78,7 @@ IonicPlatform.register({
       return /iphone|ipad|ipod/i.test(p.navigatorPlatform());
     },
     keyboardHeight: 290,
+    hoverCSS: false,
   },
   isMatch(p) {
     return p.isPlatform('ios', 'iphone|ipad|ipod');

ionic/transitions/ios-transition.ts

@@ -2,13 +2,12 @@ import {Transition} from './transition';
 import {Animation} from '../animations/animation';
 
 
-const DURATION = 600;
+const DURATION = 550;
 const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
 
 const OPACITY = 'opacity';
 const TRANSLATEX = 'translateX';
 
-const OFF_RIGHT = '100%';
 const OFF_LEFT = '-33%';
 const CENTER = '0%'
 const OFF_OPACITY = 0.8;
@@ -59,11 +58,11 @@ class IOSTransition extends Transition {
         .after.removeClass('transparent-navbar');
 
       this.leavingView
-        .to(TRANSLATEX, OFF_RIGHT)
+        .to(TRANSLATEX, '100%')
         .to(OPACITY, 1);
 
       this.leavingTitle
-        .to(TRANSLATEX, OFF_RIGHT)
+        .to(TRANSLATEX, '100%')
         .to(OPACITY, 0);
 
       if (this.leaving.enableBack() && this.viewWidth() > 200) {
@@ -75,7 +74,7 @@ class IOSTransition extends Transition {
     } else {
       // forward direction
       this.enteringView
-        .from(TRANSLATEX, OFF_RIGHT)
+        .from(TRANSLATEX, '99.5%')
         .from(OPACITY, 1);
 
       this.enteringNavbar
@@ -83,7 +82,7 @@ class IOSTransition extends Transition {
         .after.removeClass('transparent-navbar');
 
       this.enteringTitle
-        .from(TRANSLATEX, OFF_RIGHT);
+        .from(TRANSLATEX, '99.5%');
 
       this.leavingView
         .to(TRANSLATEX, OFF_LEFT)