From 187b0541fe27243b0b7ba7b4b52e5b84ab7adb2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Fri, 15 Nov 2013 00:09:37 -0500
Subject: [PATCH] fix(ngAnimate): use a fallback CSS property that doesn't
 break existing styles

The clip property seems to remove the box-shadow property when an absolute
positioned animation is ongoing. This fix changes the property to be border-spacing
which is also very underused. The border-spacing CSS property is only visible
when border-collapse is set to separate.

Closes #4902
---
 css/angular.css               | 8 ++++----
 src/ngAnimate/animate.js      | 2 +-
 test/ngAnimate/animateSpec.js | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/css/angular.css b/css/angular.css
index 029d3a7d24bc..3e20a999cca0 100644
--- a/css/angular.css
+++ b/css/angular.css
@@ -15,8 +15,8 @@ ng\:form {
  * when the active class isn't set, or if the active class doesn't
  * contain any styles to transition to, then, if ngAnimate is used,
  * it will appear as if the webpage is broken due to the forever hanging
- * animations. The clip (!ie) and zoom (ie) CSS properties are used
- * since they trigger a transition without making the browser
+ * animations. The border-spacing (!ie) and zoom (ie) CSS properties are
+ * used below since they trigger a transition without making the browser
  * animate anything and they're both highly underused CSS properties */
-.ng-animate-start { clip:rect(0, auto, auto, 0); -ms-zoom:1.0001; }
-.ng-animate-active { clip:rect(-1px, auto, auto, 0); -ms-zoom:1; }
+.ng-animate-start { border-spacing:1px 1px; -ms-zoom:1.0001; }
+.ng-animate-active { border-spacing:0px 0px; -ms-zoom:1; }
diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index 3b3c29b92990..6da3d6c32e5d 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -1012,7 +1012,7 @@ angular.module('ngAnimate', ['ng'])
           var propertyStyle = timings.transitionPropertyStyle;
           if(propertyStyle.indexOf('all') == -1) {
             applyFallbackStyle = true;
-            var fallbackProperty = $sniffer.msie ? '-ms-zoom' : 'clip';
+            var fallbackProperty = $sniffer.msie ? '-ms-zoom' : 'border-spacing';
             style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ', ' + fallbackProperty + '; ';
             style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ', ' + timings.transitionDuration + 's; ';
           }
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 8ad7ed796686..928dad7ee600 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -823,7 +823,7 @@ describe("ngAnimate", function() {
           $timeout.flush();
 
           //IE removes the -ms- prefix when placed on the style
-          var fallbackProperty = $sniffer.msie ? 'zoom' : 'clip';
+          var fallbackProperty = $sniffer.msie ? 'zoom' : 'border-spacing';
           var regExp = new RegExp("transition-property:\\s+color\\s*,\\s*" + fallbackProperty + "\\s*;");
           expect(child2.attr('style') || '').toMatch(regExp);
           expect(child2.hasClass('ng-animate')).toBe(true);