Fix content jumping on Opera mobile browsers (#7777) #8241
Conversation
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
Improve the explanation in the 'Fetching data' section to clearly distinguish when an Effect is needed (synchronization with external system) versus when it's not needed (user events, data transformation). Closes reactjs#8226
Add Opera browser detection to scroll restoration logic to fix content jumping issue when scrolling on Opera on iPhone. Opera has similar scroll behavior to Safari and needs the same scroll restoration fix. This sets history.scrollRestoration to 'auto' for Opera browsers, preventing the content jumping issue. Fixes reactjs#7777
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
110.57 KB (🟡 +21 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
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.
Summary
Fixes content jumping issue when scrolling on Opera browser on iPhone (reported in #7777).
Problem
Opera on iPhone has similar scroll behavior to Safari, but wasn't being detected in the scroll restoration logic. This caused content to jump up and down when scrolling.
Before fix:
Solution
Added Opera browser detection to the scroll restoration logic in
_app.tsx. Opera now gets the same treatment as Safari - settinghistory.scrollRestoration = 'auto'to prevent the scroll jumping issue.Changes
/OPR|Opera/iregex pattern (line 39)Testing
✅ Verified Opera detection:
✅ Tested scrolling behavior:
http://localhost:3000/blog/2025/04/23/react-labs-view-transitions-activity-and-more✅ Follows the same pattern as the existing Safari fix, which has been working well
After fix:
Screen.Recording.2026-01-16.at.7.50.58.PM.mov
Fixes #7777