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

Incorrect animation of progress spiner in Safari browser when zoom out #23668

Closed
Ukrainianboy opened this issue Sep 30, 2021 · 2 comments · Fixed by #23674
Closed

Incorrect animation of progress spiner in Safari browser when zoom out #23668

Ukrainianboy opened this issue Sep 30, 2021 · 2 comments · Fixed by #23674
Assignees
@crisbeto
Labels
area: material/progress-spinner P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Ukrainianboy
Copy link

AngularJS Material is in LTS mode

We are no longer accepting changes that are not critical bug fixes into this project.
See Long Term Support for more detail.

Bug Report

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*:

Detailed Reproduction Steps

  1. Open https://material.angular.io/components/progress-spinner/overview in Safari browser
  2. Zoom out

Explain the expected behavior

animation of progress spiner is correct

Explain the current behavior

animation of progress spiner is incorrect

Discuss the use-case or motivation for changing the existing behavior

Users of Safari browser now see broken progress spiner animation when zoon out

List the affected versions of AngularJS, Material, OS, and browsers

  • AngularJS: 1.
  • AngularJS Material: 1.
  • OS:
  • Browsers: Safari 15.0
  • Screen Readers:
Screen.Recording.2021-09-28.at.12.47.24.mov

Add anything else we should know

Stack Trace

Screenshots

Screen.Recording.2021-09-28.at.12.47.24.mov

@Splaktar
Copy link
Member

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

@Splaktar Splaktar transferred this issue from angular/material Sep 30, 2021
@Splaktar Splaktar added the needs triage This issue needs to be triaged by the team label Sep 30, 2021
@crisbeto crisbeto self-assigned this Oct 1, 2021
@crisbeto crisbeto added area: material/progress-spinner has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Oct 1, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 1, 2021
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
19bab1d 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
@crisbeto crisbeto mentioned this issue Oct 1, 2021
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 1, 2021
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
c1966aa 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 9, 2021
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
b827ae3 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 18, 2021
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
f5999e3 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 18, 2021
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
52450e2 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 18, 2021
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
b312da9 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 3, 2022
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
3ea581d 
…vels in Safari

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
andrewseguin pushed a commit that referenced this issue Jan 15, 2022
@crisbeto
fix(material/progress-spinner): animation not working on some zoom le…
653e46b 
…vels in Safari (#23674)

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes #23668.
andrewseguin pushed a commit that referenced this issue Jan 15, 2022
@crisbeto @andrewseguin
fix(material/progress-spinner): animation not working on some zoom le…
462cb6d 
…vels in Safari (#23674)

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes #23668.

(cherry picked from commit 653e46b)
@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 Feb 15, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/progress-spinner): animation not working on some zoom le…
eb6af26 
…vels in Safari (angular#23674)

Fixes that the progress spinner animation was broken on Safari on non-default zoom levels. The problem seems to be that the `transform-origin` was being offset by the amount of zoom. These changes work around it by setting the origin based on the zoom level.

Fixes angular#23668.
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 P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
3 participants
@Splaktar @crisbeto @Ukrainianboy