angular
bug(slider): Basic and Range Slider do no render properly inside MatDialog, when EnterAnimationDuration > 0
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
The Angular Material Slider Component's Thumb doesn't render properly inside a Dialog Component when the default animation isn't deactivated.
The Slider Thumb (both within Basic Slider as well as Range Slider) is not rendered at the correct location, but instead 20% to the left, when placed inside the Dialog Component without disabling its (default) enterAnimation.
Depending on the slider's size, this can be quite noticable. The Slider Component should behave identically whether being placed in a Dialog Component with Animation enabled or not. Disabling the Dialog's enterAnimation fixes the issue.
Please take a look at my Stackblit bug reproduction (or alternatively as Application URL).
Reproduction
Stackblit bug reproduction (or alternatively as Application URL).
Steps to reproduce:
- Open MatDialog without disabling default enter Animation
- Within said Dialog, place the Slider Component
- Both basic slider and range slider will have missplaced thumbs (20% to the left of its intended value)
Expected Behavior
The Slider Component's Thumb should be rendered at its correct location, given by its value.
Actual Behavior
The Slider Component's Thumb is rendered approx. 20% to the left of its intended place.
Environment
- Angular: 15.0.0
- CDK/Material: 15.0.0
- Browser(s): Chrome, Safari, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Tested on macOS
