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

[Loader] Animation buggy on iOS #6383

Closed
macandcheese opened this issue Jan 30, 2023 · 4 comments
Closed

[Loader] Animation buggy on iOS #6383

macandcheese opened this issue Jan 30, 2023 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-loader Issues that pertain to the calcite-loader component Calcite (design) Issues logged by Calcite designers. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2023 August Prior...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jan 30, 2023 •
edited
Loading

Actual Behavior

Animation of Loader is buggy on iOS (Safari and Chrome):

RPReplay_Final1675113918.MP4

Expected Behavior

I'd expect the loader to animate smoothly.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/loader/

Reproduction Steps

A simple loader in isolation in code pen or in the developer site sample displays the issue.

Reproduction Version

1.0.3

Relevant Info

I noticed this on my iOS devices. I don't have an Android device to test but would be good to confirm. Can use XCode Simulator to recreate locally.

Regression?

No response

Impact

No response

Esri team

Calcite (design)
@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 30, 2023
@github-actions github-actions bot added the Calcite (design) Issues logged by Calcite designers. label Jan 30, 2023
@github-actions
Copy link
Contributor

It looks like this issue is missing some information:

  • A codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible. If you are experiencing build or Node related errors, please provide a GitHub repo for the sample.

Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding.

@github-actions github-actions bot added the incomplete issue report New issues missing important information, and unless provided, they will be closed after 5 days. label Jan 30, 2023
@geospatialem geospatialem removed the incomplete issue report New issues missing important information, and unless provided, they will be closed after 5 days. label Jan 31, 2023
@macandcheese macandcheese added the c-loader Issues that pertain to the calcite-loader component label Mar 28, 2023
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Mar 30, 2023
@geospatialem geospatialem added this to the 2023 August Priorities milestone Jun 22, 2023
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 22, 2023
@jcfranco
Copy link
Member

Worth noting that this is also reproducible on OS X (Ventura 13.5, Safari 16.6).

@jcfranco jcfranco mentioned this issue Aug 22, 2023
Merged
@jcfranco jcfranco self-assigned this Aug 22, 2023
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Aug 22, 2023
jcfranco added a commit that referenced this issue Aug 24, 2023
@jcfranco
fix(loader): tweak loading animations to work in Safari (#7564)
2103654 
**Related Issue:** #6383 

## Summary

This revisits how the loader animates its different segments to play
nicely across all browsers. It seems like the percentages calculated
[here](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/components/loader/loader.scss#L179-L181)
are causing Safari to interrupt the animation before resetting (there
are some [existing](https://bugs.webkit.org/show_bug.cgi?id=258897)
[issues](https://bugs.webkit.org/show_bug.cgi?id=249307) on this
behavior). It comes close to the original, but it's not identical, so
I'm open to suggestions on how to improve this. cc @driskull
@macandcheese @paulcpederson

Also, the `loader-clockwise` (rotating) animation is now applied to the
SVG container to avoid it being overwritten by the `loader-offset-#`
animations.

This also fixes the determinate loader logic that mimics a loader
updating dynamically (demo page).
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Aug 24, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Aug 27, 2023
@geospatialem
Copy link
Member

geospatialem commented Aug 27, 2023 •
edited
Loading

Verified with iOS 16.6 in Chrome with 1.7.0-next.9.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-loader Issues that pertain to the calcite-loader component Calcite (design) Issues logged by Calcite designers. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2023 August Priorities
Development

No branches or pull requests
4 participants
@jcfranco @alisonailea @macandcheese @geospatialem