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

Stutter scrolling on iOS Safari 17 #8625

Closed
1 task
evertjr opened this issue Sep 22, 2023 · 8 comments · Fixed by #10235
Closed
1 task

Stutter scrolling on iOS Safari 17 #8625

evertjr opened this issue Sep 22, 2023 · 8 comments · Fixed by #10235
Assignees
@matthewp
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: view transitions Related to the View Transitions feature (scope)

Comments

@evertjr
Copy link

evertjr commented Sep 22, 2023 •
edited
Loading

Astro Info

Astro                    v3.1.2
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Safari

Describe the Bug

I used the blog template to start with.
I'm using SPA mode by importing <ViewTransitions /> component in the common <head>

It works fine in all browsers, except on iOS Safari on my iPhone 14 Pro Max, the scroll is extremely stuttery and it's likely using a lot of CPU as the phone gets warm. This doesn't happen in other SPAs using other frameworks.

Setting the fallback to none fixes the problem but disables the SPA behavior, the problem persists even with fallback swap.

Weirdly enough on my old iPad 9 it works fine, maybe it's something related to the ProMotion display? I'm not sure how Astro implementation works but this demo https://live-transitions.pages.dev/ doesn't cause any issues.

What's the expected result?

The scroll should be smooth and a simple static webpage should not cause high cpu usage.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rywjxp?file=src%2Fcomponents%2FBaseHead.astro

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Sep 22, 2023
@ghost
Copy link

ghost commented Sep 24, 2023

If I may suggest try the fallback option in your ViewTransitions as the view transition api only works in chromium browsers currently, word is their team is still developing browser support

@evertjr
Copy link
Author

evertjr commented Sep 24, 2023

That's what I did, but setting fallback to none also disables Astro's SPA behavior, which I think are two separated things in the same feature. I was relying on the astro:page-load event listener which as result doesn't fire on Safari with fallback none, so I had to do some extra work to make interactive components behave correctly in SPA and MPA modes. Ideally it should just work since that's what advertised... When enabled it does present a fade animation in Safari but I guess there's some unthrottled function running at 120hz and causing performance issues.

@matthewp matthewp added the - P4: important Violate documented behavior or significantly impacts performance (priority) label Sep 27, 2023
@matthewp matthewp self-assigned this Sep 27, 2023
@matthewp matthewp added feat: view transitions Related to the View Transitions feature (scope) and removed needs triage Issue needs to be triaged labels Sep 27, 2023
@evertjr
Copy link
Author

evertjr commented Oct 23, 2023 •
edited
Loading

the last few updates haven't addressed this issue. Theres something I can do to help?

To quickly reproduce the issue all it takes is to start a Astro project with blog template, import the <ViewTransitions /> into the BaseHead.astro and open the website on a iPhone with ProMotion Display (mine is 14 pro max), theres heavy stuttering while scrolling.

@matthewp
Copy link
Contributor

@evertjr you could try tweaking the value here: https://github.com/withastro/astro/blob/main/packages/astro/src/transitions/router.ts#L520-L521 The 300 controls how often the scroll handler is called. Maybe try increasing that value? You'll need to delete node_modules/.vite if you change that file.

@fredericoo
Copy link

Also having this issue. Also perceptible by trying to over-scroll the container on desktop devices.

Linke you mentioned @matthewp is no longer there, and there's no 300 anymore. I wonder if it's now being called on a loop?

@matthewp
Copy link
Contributor

@fredericoo The number is here:

astro/packages/astro/src/transitions/router.ts

Line 599 in d234005

else addEventListener('scroll', throttle(onScroll, 350), { passive: true });
it's now 350

@QasimArif
Copy link

Glad I'm not seeing things. Thought it was just me. I've added the fallback to none and it's all good for me now.

I did some general testing and found it's iOS Safari & iOS Chrome where I'm seeing issues. Firefox is smooth. Using iPhone 14 pro.

Astro 4.3.1

@matthewp
Copy link
Contributor

@QasimArif Can you try adjusting the values in #8625 (comment) and see if that helps?

sanman1k98 added a commit to sanman1k98/astro that referenced this issue Feb 26, 2024
@sanman1k98
fix(withastro#8625): smooth scrolling in SPA mode on iOS
dead626
@sanman1k98 sanman1k98 mentioned this issue Feb 26, 2024
Merged
sanman1k98 added a commit to sanman1k98/astro that referenced this issue Feb 28, 2024
@sanman1k98
fix(withastro#8625): smooth scrolling in SPA mode on iOS
f487ea0
martrapp added a commit that referenced this issue Mar 3, 2024
@sanman1k98 @martrapp
fix(#8625): smooth scrolling in SPA mode on iOS (#10235)
4bc360c 
* fix(#8625): smooth scrolling in SPA mode on iOS

* perf(router): run cb every 200ms only when scolling

* refactor(router): suggested changes and fixes

Suggested changes:
- change interval time from 200 to 50ms
- initialize `last*` vars together with the call to `setInterval()`
- clear interval when scroll positions stop changing, independent of
  history state

Additional changes:
- remove unused `throttle()` function
- move guarded block to inside `onScrollEnd()` since using history
  navigation will trigger our "popstate" callback and fire additional
  "scroll" and "scrollend" events, causing redundant expensive calls to
  `replaceState()`

* adds changeset

---------

Co-authored-by: Martin Trapp <[email protected]>
peng added a commit to peng/astro that referenced this issue Mar 4, 2024
@peng
Merge branch 'main' into add-multiple-cdn-v2
ecd9414 
* main:
  [ci] format
  fix(withastro#8625): smooth scrolling in SPA mode on iOS (withastro#10235)
  [ci] release (withastro#10292)
  [ci] format
  finalize WIP API (withastro#10280)
  [ci] format
  fix(markdoc & mdx): Proxy crimes (withastro#10278)
  [ci] release (withastro#10286)
  fix(audits): Don't warn about loading on data URIs (withastro#10275)
  fix(node): Safely create requests (withastro#10285)
  [ci] release (withastro#10265)
  [ci] format
  fix(assets): Solidify Node endpoint (withastro#10284)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthewp matthewp

Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: view transitions Related to the View Transitions feature (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(#8625): smooth scrolling in SPA mode on iOS sanman1k98/astro
4 participants
@matthewp @QasimArif @evertjr @fredericoo