Skip to content

Commit 6db0fa9

Browse files
authored
fix(material/stepper): setting invalid value for visibility (#22254)
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.
1 parent 69a8fb5 commit 6db0fa9

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

src/material/stepper/stepper-animations.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ export const matStepperAnimations: {
2525
/** Animation that transitions the step along the X axis in a horizontal stepper. */
2626
horizontalStepTransition: trigger('stepTransition', [
2727
state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
28-
// Transition to '', rather than `visible`, because visibility on a child element overrides
29-
// the one from the parent, making this element focusable inside of a `hidden` element.
30-
state('current', style({transform: 'none', visibility: ''})),
28+
// Transition to `inherit`, rather than `visible`,
29+
// because visibility on a child element the one from the parent,
30+
// making this element focusable inside of a `hidden` element.
31+
state('current', style({transform: 'none', visibility: 'inherit'})),
3132
state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
3233
transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
3334
]),
@@ -36,9 +37,10 @@ export const matStepperAnimations: {
3637
verticalStepTransition: trigger('stepTransition', [
3738
state('previous', style({height: '0px', visibility: 'hidden'})),
3839
state('next', style({height: '0px', visibility: 'hidden'})),
39-
// Transition to '', rather than `visible`, because visibility on a child element overrides
40-
// the one from the parent, making this element focusable inside of a `hidden` element.
41-
state('current', style({height: '*', visibility: ''})),
40+
// Transition to `inherit`, rather than `visible`,
41+
// because visibility on a child element the one from the parent,
42+
// making this element focusable inside of a `hidden` element.
43+
state('current', style({height: '*', visibility: 'inherit'})),
4244
transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
4345
])
4446
};

0 commit comments

Comments
 (0)