fix(ripple): make checkbox only scale up to 1.0, looks good on ios

angular · Aug 30, 2014 · ed65da9 · ed65da9
1 parent a1c1a3e
commit ed65da9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/components/animate/_effects.scss b/src/components/animate/_effects.scss
@@ -29,11 +29,11 @@ material-ink-bar {
     opacity: 0.4;
   } 
   50% {
-    @include transform(scale(2.7));
+    @include transform(scale(1.0));
     opacity: 0.4;
   }
   100% {
-    @include transform(scale(2.7));
+    @include transform(scale(1.0));
     opacity: 0;
   }
 }
@@ -53,6 +53,5 @@ material-ink-bar {
 }
 
 .material-ripple {
-  z-index: 0;
   position: absolute;
 }
diff --git a/src/components/animate/inkCssRipple.js b/src/components/animate/inkCssRipple.js
@@ -125,9 +125,6 @@ function InkRippleService($window, $$rAF, $materialEffects, $timeout) {
       return createRipple(ev.pageX, ev.pageY, true);
     }
     function createRipple(left, top, positionsAreAbsolute) {
-      var elementRect = node.getBoundingClientRect();
-      var elementStyle = $window.getComputedStyle(node);
-      var finalSize = elementRect.width;
 
       var rippleEl = angular.element('<div class="material-ripple">')
         .css(
@@ -156,15 +153,17 @@ function InkRippleService($window, $$rAF, $materialEffects, $timeout) {
         left = rippleContainer.prop('offsetWidth') / 2;
         top = rippleContainer.prop('offsetHeight') / 2;
       } else if (positionsAreAbsolute) {
+        var elementRect = node.getBoundingClientRect();
         left -= elementRect.left;
         top -= elementRect.top;
       }
 
-      var rippleStyle = $window.getComputedStyle(rippleEl[0]);
+      var finalSize = rippleContainer.prop('offsetWidth');
 
       // TODO don't use px, make setRippleCss fix that
       var css = {
-        'background-color': rippleStyle.color || elementStyle.color,
+        'background-color': $window.getComputedStyle(rippleEl[0]).color || 
+          $window.getComputedStyle(node).color,
         'border-radius': (finalSize / 2) + 'px',
 
         left: (left - finalSize / 2) + 'px',

diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -16,10 +16,10 @@ material-checkbox {
     .material-ripple-container {
       position: absolute;
       display: block;
-      width: 70px;
-      height: 70px;
-      left: -(35 - $checkbox-width / 2);
-      top: -(35 - $checkbox-width / 2);
+      width: $checkbox-width * 3; 
+      height: $checkbox-width * 3;
+      left: -$checkbox-width;
+      top: -$checkbox-width;
     }
     .material-ripple {
       color: #0f9d58;

diff --git a/src/components/radioButton/_radio-button.scss b/src/components/radioButton/_radio-button.scss
@@ -21,10 +21,10 @@ material-radio-button,
     .material-ripple-container {
       position: absolute;
       display: block;
-      width: 70px;
-      height: 70px;
-      left: -(35 - $radio-width / 2);
-      top: -(35 - $radio-width / 2);
+      width: $radio-width * 3; 
+      height: $radio-width * 3;
+      left: -$radio-width;
+      top: -$radio-width;
     }
     .material-ripple {
       color: #0f9d58;