Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 1d50663

Browse files
committed
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 Closes #5030
1 parent ec3c4f9 commit 1d50663

File tree

3 files changed

+6
-6
lines changed

3 files changed

+6
-6
lines changed

css/angular.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ ng\:form {
1515
* when the active class isn't set, or if the active class doesn't
1616
* contain any styles to transition to, then, if ngAnimate is used,
1717
* it will appear as if the webpage is broken due to the forever hanging
18-
* animations. The clip (!ie) and zoom (ie) CSS properties are used
19-
* since they trigger a transition without making the browser
18+
* animations. The border-spacing (!ie) and zoom (ie) CSS properties are
19+
* used below since they trigger a transition without making the browser
2020
* animate anything and they're both highly underused CSS properties */
21-
.ng-animate-start { clip:rect(0, auto, auto, 0); -ms-zoom:1.0001; }
22-
.ng-animate-active { clip:rect(-1px, auto, auto, 0); -ms-zoom:1; }
21+
.ng-animate-start { border-spacing:1px 1px; -ms-zoom:1.0001; }
22+
.ng-animate-active { border-spacing:0px 0px; -ms-zoom:1; }

src/ngAnimate/animate.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1023,7 +1023,7 @@ angular.module('ngAnimate', ['ng'])
10231023
var propertyStyle = timings.transitionPropertyStyle;
10241024
if(propertyStyle.indexOf('all') == -1) {
10251025
applyFallbackStyle = true;
1026-
var fallbackProperty = $sniffer.msie ? '-ms-zoom' : 'clip';
1026+
var fallbackProperty = $sniffer.msie ? '-ms-zoom' : 'border-spacing';
10271027
style += CSS_PREFIX + 'transition-property: ' + propertyStyle + ', ' + fallbackProperty + '; ';
10281028
style += CSS_PREFIX + 'transition-duration: ' + timings.transitionDurationStyle + ', ' + timings.transitionDuration + 's; ';
10291029
}

test/ngAnimate/animateSpec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -823,7 +823,7 @@ describe("ngAnimate", function() {
823823
$timeout.flush();
824824

825825
//IE removes the -ms- prefix when placed on the style
826-
var fallbackProperty = $sniffer.msie ? 'zoom' : 'clip';
826+
var fallbackProperty = $sniffer.msie ? 'zoom' : 'border-spacing';
827827
var regExp = new RegExp("transition-property:\\s+color\\s*,\\s*" + fallbackProperty + "\\s*;");
828828
expect(child2.attr('style') || '').toMatch(regExp);
829829
expect(child2.hasClass('ng-animate')).toBe(true);

0 commit comments

Comments
 (0)