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.

Sign up for GitHub

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

Jump to bottom

MatSpinner making scroll bars bounce #16894

Closed
paulferaud opened this issue Aug 27, 2019 · 2 comments · Fixed by #16930
Closed

MatSpinner making scroll bars bounce #16894

paulferaud opened this issue Aug 27, 2019 · 2 comments · Fixed by #16930
Assignees
@crisbeto
Labels
area: material/progress-spinner help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@paulferaud
Copy link
Contributor

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
https://stackblitz.com/edit/angular-ohvkwv

Steps to reproduce:

  1. Create a spinner
  2. Place in an element with overflow: auto

Expected Behavior

What behavior were you expecting to see?
See the mat spinner, spinning, inside a div.

Actual Behavior

What behavior did you actually see?
The spinner spins, but the div has scroll bars bouncing around.

Fix (?)

Playing with the CSS, it seems like this can be fixed once and for all (I keep hitting this all the time) if:

  • The spinning animation is moved from the host to the actual svg
  • The host is given the style overflow: hidden

Environment

  • Angular: "8.0.0"
  • CDK/Material: "8.1.4"
  • Browser(s): Version 76.0.3809.100
  • Operating System (e.g. Windows, macOS, Ubuntu): Debian GNU/Linux rodete
@jelbourn
Copy link
Member

This happens because the spinner actually rotates:
image

In its rotated position, it's larger than its container. Any fix here will need to ensure that it doesn't cause any breaking layout changes, potentially by making the actual spinning portion position: absolute.

As a temporary workaround, you can increase the size of the container either via height or padding.

@jelbourn jelbourn added help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions labels Aug 30, 2019
@crisbeto crisbeto self-assigned this Aug 31, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 31, 2019
@crisbeto
fix(progress-spinner): rotating circle changing surrounding layout
b6ae845 
When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes angular#16894.
@crisbeto crisbeto mentioned this issue Aug 31, 2019
Merged
jelbourn pushed a commit that referenced this issue Sep 6, 2019
@crisbeto @jelbourn
fix(progress-spinner): rotating circle changing surrounding layout
8894991 
When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes #16894.
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 11, 2019
@crisbeto
fix(progress-spinner): rotating circle changing surrounding layout
ae742cb 
When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes angular#16894.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P4 A relatively minor issue that is not relevant to core functions labels Nov 3, 2020
annieyw pushed a commit that referenced this issue Nov 4, 2020
@crisbeto
fix(progress-spinner): rotating circle changing surrounding layout (#…
930bc7e 
…16930)

When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes #16894.
annieyw pushed a commit that referenced this issue Nov 4, 2020
@crisbeto @annieyw
fix(progress-spinner): rotating circle changing surrounding layout (#…
cbe8b5e 
…16930)

When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes #16894.

(cherry picked from commit 930bc7e)
annieyw pushed a commit that referenced this issue Nov 4, 2020
@crisbeto @annieyw
fix(progress-spinner): rotating circle changing surrounding layout (#…
87ccb98 
…16930)

When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes #16894.

(cherry picked from commit 930bc7e)
@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 Dec 5, 2020
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@crisbeto @wagnermaciel
fix(progress-spinner): rotating circle changing surrounding layout (a…
192b9e1 
…ngular#16930)

When the progress spinner is rotating its layout can outside that of the parent which can have an effect on scroll bars. These changes put the rotating animation on the `svg` node and make the component host `overflow: hidden`.

Fixes angular#16894.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/progress-spinner help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(progress-spinner): rotating circle changing surrounding layout crisbeto/material2
4 participants
@jelbourn @crisbeto @andrewseguin @paulferaud