From a0e4a0fe1b6dde926239384c634c5c898c42c21f Mon Sep 17 00:00:00 2001 From: Vinit Tomar Date: Thu, 18 Mar 2021 22:09:36 +0530 Subject: [PATCH] fix(material/stepper): setting invalid value for visibility Setting empty string for visibility is an invalid css property value. Which leads to error "Failed to execute 'animate' on 'Element' : Partial keyframes are not supported" in old browser. --- src/material/stepper/stepper-animations.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/material/stepper/stepper-animations.ts b/src/material/stepper/stepper-animations.ts index 930e8fbea7f6..7d98ee9f34f0 100644 --- a/src/material/stepper/stepper-animations.ts +++ b/src/material/stepper/stepper-animations.ts @@ -25,9 +25,10 @@ export const matStepperAnimations: { /** Animation that transitions the step along the X axis in a horizontal stepper. */ horizontalStepTransition: trigger('stepTransition', [ state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})), - // Transition to '', rather than `visible`, because visibility on a child element overrides - // the one from the parent, making this element focusable inside of a `hidden` element. - state('current', style({transform: 'none', visibility: ''})), + // Transition to `inherit`, rather than `visible`, + // because visibility on a child element the one from the parent, + // making this element focusable inside of a `hidden` element. + state('current', style({transform: 'none', visibility: 'inherit'})), state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})), transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')) ]), @@ -36,9 +37,10 @@ export const matStepperAnimations: { verticalStepTransition: trigger('stepTransition', [ state('previous', style({height: '0px', visibility: 'hidden'})), state('next', style({height: '0px', visibility: 'hidden'})), - // Transition to '', rather than `visible`, because visibility on a child element overrides - // the one from the parent, making this element focusable inside of a `hidden` element. - state('current', style({height: '*', visibility: ''})), + // Transition to `inherit`, rather than `visible`, + // because visibility on a child element the one from the parent, + // making this element focusable inside of a `hidden` element. + state('current', style({height: '*', visibility: 'inherit'})), transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]) };