Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/tabs): remove visibility style when hydrating #29220

Merged
merged 1 commit into from
Jul 8, 2024

Conversation

JeanMeche
Copy link
Member

@JeanMeche JeanMeche commented Jun 9, 2024

Before this commit, when using pre-rendering, the styling animation would only remove the transform style when hydrating the component. This commit fixes this by including visibility as styles to remove when playing the animations.


Context for this issue is adev: https://angular.dev/api/common/AsyncPipe?tab=usage-notes
As you can see, the tabs doesn't hydrate correctly, visibility:hidden on the tab body isn't removed when the animation flushes.

I tried the fix in angular/angular#56340
Demo link: https://ng-dev-previews-fw--pr-angular-angular-56340-adev-prev-xdjybnyt.web.app/api/common/AsyncPipe?tab=usage-notes


Edit: narrowed down repro: https://github.com/JeanMeche/mat-tabs-prerendering-bug

@JeanMeche JeanMeche mentioned this pull request Jun 9, 2024
@JeanMeche JeanMeche marked this pull request as ready for review June 9, 2024 22:46
@JeanMeche JeanMeche requested a review from a team as a code owner June 9, 2024 22:46
@JeanMeche JeanMeche requested review from amysorto and wagnermaciel and removed request for a team June 9, 2024 22:46
@JeanMeche
Copy link
Member Author

I've added a narrowed down repro: https://github.com/JeanMeche/mat-tabs-prerendering-bug

@andrewseguin andrewseguin self-assigned this Jun 11, 2024
@mmalerba mmalerba added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Jun 14, 2024
Before this commit, when using pre-rendering, the styling animation would only remove the `transform` style when hydrating the component. This commit fixes this by including `visibility` as styles to remove when playing the animations.
@andrewseguin andrewseguin merged commit e95d88c into angular:main Jul 8, 2024
20 of 22 checks passed
andrewseguin pushed a commit that referenced this pull request Jul 8, 2024
Before this commit, when using pre-rendering, the styling animation would only remove the `transform` style when hydrating the component. This commit fixes this by including `visibility` as styles to remove when playing the animations.

(cherry picked from commit e95d88c)
andrewseguin pushed a commit that referenced this pull request Jul 8, 2024
Before this commit, when using pre-rendering, the styling animation would only remove the `transform` style when hydrating the component. This commit fixes this by including `visibility` as styles to remove when playing the animations.

(cherry picked from commit e95d88c)
@JeanMeche JeanMeche deleted the fix/adev-api-tabs branch July 8, 2024 16:31
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants