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

White Screen and Glitchy Scroll Rendering Issues on Mobile Safari #2732

Closed
erichfi opened this issue Jul 29, 2024 · 1 comment · Fixed by #2824 · May be fixed by #2818
Closed

White Screen and Glitchy Scroll Rendering Issues on Mobile Safari #2732

erichfi opened this issue Jul 29, 2024 · 1 comment · Fixed by #2824 · May be fixed by #2818
Assignees
@tim-schultz @lucianHymer

Comments

@erichfi
Copy link
Collaborator

erichfi commented Jul 29, 2024

Overview
When using Mobile Safari, users sometimes encounter a white screen when scrolling. There are also issues with glitchy and rerendering problems, overlay issues, and occasional scroll repainting. Additionally, the scrolling sometimes starts from the top again, despite not navigating back to the top.

Steps To Reproduce

  1. Open Mobile Safari.
  2. Navigate to the Passport application (provide URL or specific page).
  3. Begin scrolling down the page.
  4. Observe the errors described below.

Observed behavior

  • White screen appears intermittently while scrolling.
  • Glitchy and unstable rendering, with content flickering.
  • Overlay elements (such as modals or dropdowns) not displaying correctly.
  • Scroll repainting issues, leading to visual artifacts.
  • Scrolling unexpectedly resets to the top of the page without user intervention.

Expected behavior

  • Smooth and stable scrolling without white screen interruptions.
  • Proper rendering of all elements, with no flickering or glitches.
  • Overlay elements display correctly and consistently.
  • Continuous scrolling without unexpected resets to the top of the page.

Screenshots
N/A

Additional context

  • OS: iOS
  • Browser: Mobile Safari
@erichfi erichfi mentioned this issue Jul 26, 2024
Open
@tim-schultz tim-schultz self-assigned this Aug 28, 2024
@tim-schultz tim-schultz mentioned this issue Aug 28, 2024
Draft
@tim-schultz
Copy link
Collaborator

Safari on mobile iPhone 11 is working well for me. I'm on 4g LTE so wondering if the issue was network speed when this issue was occurring.

I looked into how we can optimize our current fe. Since we are using next but not using the next router we are not taking advantage of next's built in code splitting by route/page https://nextjs.org/learn/dashboard-app/navigating-between-pages#automatic-code-splitting-and-prefetching.

The linked PR moves the page components to the components dir so they are not statically built. It then uses next's dynamic imports to dynamically import the components when needed.

It does decrease the initial load size which seems like it could help, but unsure the full implications in terms of speed

Before:
Screenshot 2024-08-28 at 5 06 16 PM

After:
Screenshot 2024-08-28 at 5 07 04 PM

@lucianHymer lucianHymer self-assigned this Aug 30, 2024
@lucianHymer lucianHymer mentioned this issue Aug 30, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tim-schultz tim-schultz

@lucianHymer lucianHymer

Labels
None yet
Projects
Passport New
Archived in project
Milestone
No milestone
3 participants
@tim-schultz @lucianHymer @erichfi