fix(types): apply AppType generic to top-level props instead of pageP…#94117
Open
deeepanshu12 wants to merge 2 commits into
Open
fix(types): apply AppType generic to top-level props instead of pageP…#94117deeepanshu12 wants to merge 2 commits into
deeepanshu12 wants to merge 2 commits into
Conversation
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Comment on lines
+18
to
+19
| <html lang="en"> | ||
| <body> |
Contributor
There was a problem hiding this comment.
Suggested change
| <html lang="en"> | |
| <body> | |
| <html | |
| lang="en" | |
| // Suppress hydration warnings here specifically because we'll modify the | |
| // classname for the theme before React hydrates. This is to prevent a flash | |
| // of incorrect theme. | |
| suppressHydrationWarning | |
| > | |
| <head> | |
| <script | |
| // biome-ignore lint/security/noDangerouslySetInnerHtml: Needed to prevent flash of incorrect theme | |
| dangerouslySetInnerHTML={{ | |
| __html: ` | |
| (function() { | |
| const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; | |
| document.documentElement.classList.toggle('dark', theme === 'dark'); | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { | |
| document.documentElement.classList.toggle('dark', e.matches); | |
| }); | |
| })(); | |
| `, | |
| }} | |
| /> | |
| </head> | |
| <body className="font-sans antialiased"> |
The MobileSwipeFix PR accidentally removed the dark mode theme initialization script, suppressHydrationWarning, and body CSS classes from bundle-analyzer's root layout, breaking dark mode and font styling.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this PR does / why we need it
This PR implements a workaround for a well-known visual glitch on iOS mobile browsers (Safari/WebKit) where swiping back on a dynamic page causes the previous screen to "flash" or "flicker" before the content fully loads.
The issue occurs because Safari takes a static snapshot of the current page for its swipe-back animation. By the time Next.js re-renders the previous page's DOM, the snapshot and the live DOM mismatch, causing the flicker.
The Fix (Approach 1): This PR adds global event listeners for
pagehideandpageshow.pagehide(right before the user navigates away), we setdocument.body.style.opacity = '0'. Safari captures a transparent snapshot instead of the old page content.pageshow(when returning), we restoredocument.body.style.opacity = '1'.This completely eliminates the jarring flash of the wrong content.
Which issue(s) this fixes
Fixes #10465
Special notes for your reviewer