fix(range): tap and range styles for Edge. Fixes #3853

ionic-team · Dec 8, 2015 · 4ee8678 · 4ee8678
1 parent 0522863
commit 4ee8678
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/js/utils/platform.js b/js/utils/platform.js
@@ -10,6 +10,7 @@
   var IOS = 'ios';
   var ANDROID = 'android';
   var WINDOWS_PHONE = 'windowsphone';
+  var EDGE = 'edge';
   var requestAnimationFrame = ionic.requestAnimationFrame;
 
   /**
@@ -229,6 +230,14 @@
     isWindowsPhone: function() {
       return self.is(WINDOWS_PHONE);
     },
+    /**
+     * @ngdoc method
+     * @name ionic.Platform#isEdge
+     * @returns {boolean} Whether we are running on MS Edge/Windows 10 (inc. Phone)
+     */
+    isEdge: function() {
+      return self.is(EDGE);
+    },
 
     /**
      * @ngdoc method
@@ -249,6 +258,8 @@
         platformName = n.toLowerCase();
       } else if (getParameterByName('ionicplatform')) {
         platformName = getParameterByName('ionicplatform');
+      } else if (self.ua.indexOf('Edge') > -1) {
+        platformName = EDGE;
       } else if (self.ua.indexOf('Windows Phone') > -1) {
         platformName = WINDOWS_PHONE;
       } else if (self.ua.indexOf('Android') > 0) {

diff --git a/js/utils/tap.js b/js/utils/tap.js
@@ -361,7 +361,8 @@ function tapMouseDown(e) {
     console.log('mousedown', 'stop event');
     e.stopPropagation();
 
-    if ((!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) && !isSelectOrOption(e.target.tagName) && !ionic.tap.isVideo(e.target)) {
+    if (!ionic.Platform.isEdge() && (!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) &&
+      !isSelectOrOption(e.target.tagName) && !ionic.tap.isVideo(e.target)) {
       // If you preventDefault on a text input then you cannot move its text caret/cursor.
       // Allow through only the text input default. However, without preventDefault on an
       // input the 300ms delay can change focus on inputs after the keyboard shows up.

diff --git a/scss/_range.scss b/scss/_range.scss
@@ -20,10 +20,10 @@
   background-size: 99% $range-track-height;
   background-repeat: no-repeat;
   -webkit-appearance: none;
-  
+
   &::-moz-focus-outer {
     /* hide the focus outline in Firefox */
-    border: 0;  
+    border: 0;
   }
 
   &::-webkit-slider-thumb {
@@ -59,6 +59,11 @@
     //background: red;
     //opacity: .5;
   }
+   &::-ms-fill-lower{
+     height: $range-track-height;
+     background:$dark;
+   }
+  /*
    &::-ms-track{
      background: transparent;
      border-color: transparent;
@@ -77,14 +82,11 @@
      margin-right:1px;
      outline:none;
    }
-   &::-ms-fill-lower{
-     height: $range-track-height;
-     background:$dark;
-   }
    &::-ms-fill-upper {
      height: $range-track-height;
      background:$range-default-track-bg;
    }
+   */
 }
 
 .range {