Comments (19)
Weird, I'm unable to reproduce this. Tested by opening https://reactjs.org/docs/hello-world.html on Chrome Devtools with iPhone 5 dimensions.
from react.dev.
I figured out that removing those margin-left: auto and margin-right: auto from header would fix the problem on most pages.
Perharps I can open a PR when i get this to work.
from react.dev.
cc @joecritch in case he knows of anything that might break as a result of removing those 😁
from react.dev.
I believe this is a Chrome DevTools Issue related to zooming in/out from Desktop to Device view mode since that's the only way I could reproduce it (Couldn't reproduce on my phone though).
I also now believe this was the cause.
from react.dev.
I think it's safe to close this issue given the zoom comments above and the general difficult reproducing it. 👍 Thanks all!
from react.dev.
I'm also unable to reproduce this in either Chrome Devtools or in an actual Samsung Galaxy S6
from react.dev.
Cannot reproduce it either
from react.dev.
I'm able to reproduce it in Chrome with mobile layout. (Chrome in desktop mode will not resize narrow enough to reproduce it but if you toggle it to iPhone size, it repros for me.)
from react.dev.
@bvaughn Oh I got it. I'll work on it right now
from react.dev.
Great! This issue is all yours, @thomasyimgit 😄
I've added an "in-progress" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.
Cheers!
from react.dev.
@bvaughn Hi Brian, sorry about the duplicated PR earlier. Just need to get myself familiar with how things work here. :)
About this issue, I saw this bug like two or three times but still cannot reproduce it 100%. I tested in every mobile sizes and in Chrome incognito mode, and it works fine. So it's kind of hard to know my solution is REALLY solving the problem. So I can only provide somethings I've noticed that may cause this problem:
- the
<body>
is missing amax-width: 100%;
- the attributes of the viewport meta tag is not that complete. It misses:
maximum-scale=1, minimum-scale=1
. So when you zoom even a little bit, it enables the horizontal scroll.
Sorry about that.
from react.dev.
I've also had some trouble reproducing it 100% of the time.
the attributes of the viewport meta tag is not that complete. It misses:
maximum-scale=1, minimum-scale=1
. So when you zoom even a little bit, it enables the horizontal scroll.
I believe this is intentional, as per the UI designer who helped create the new site. cc @joecritch for confirmation.
from react.dev.
Yeah, ideally we don't want to have maximum-scale=1, minimum-scale=1
because that disables zooming, which is an accessibility problem.
I've not looked into this particular issue, but I had a similar issue with inline <code>
, whereby it needed word-wrap: break-word
to prevent horizontal scrolling on pages which had long <code>
"words".
If it's not an issue on other pages, perhaps see if it's some particular content which is causing the issue?
from react.dev.
If it's not an issue on other pages, perhaps see if it's some particular content which is causing the issue?
For me, when I'm able to reproduce it, I can reproduce it on every page.
from react.dev.
Are we still following up this issue? I'm kind of stuck now;(
from react.dev.
No worries. I'll remove the "in-progress" label if you're stuck. Maybe someone else will have an idea we haven't thought of yet. 😄
from react.dev.
Well, removing some margin: auto's did the job to me for most pages, but I don't believe removing these rules is what's supposed to be doing on this issue.
I believe this is a Chrome DevTools Issue related to zooming in/out from Desktop to Device view mode since that's the only way I could reproduce it (Couldn't reproduce on my phone though).
Plus, I want to show this:
Non horizontal scrollable layout:
Maybe @joecritch knows something about these Chrome DevTools tricks?
from react.dev.
Not 100% sure, but I think this if this is the real cause, then google/WebFundamentals#2984 can tell us something (couldn't find the related issue on bugs.chromium yet).
from react.dev.
Can't reproduce on any of these devices:
- iPhone 6 running iOS 11.0.3 on Safari
- Oneplus Two running Android 7 Nougat on Chrome
- Chrome DevTools
Is this still relevant or is it just that I'm unable to reproduce it?
from react.dev.
Related Issues (20)
- [Mistake]: React 19 says that startTransition callback must be synchronous. It is not true. HOT 1
- React Fiber documentation not present in the current Docs
- [Bug]: ERR_SSL_PROTOCOL_ERROR on Translations Page
- [Suggestion]: Update the starter code in sandbox of Tic tac toe game tutorial
- [Suggestion]: Improve code in Tic-Tac-Toe demo HOT 3
- [Suggestion]: How to avoid null checks when initializing useRef later
- Doc not found: https://react.dev/contributing/design-principles.html
- [Bug]: No Mention of RFCs (or ANY Way to Provide Feedback) on Site HOT 1
- React components should be pure, not "idempotent" HOT 2
- page does not exist HOT 1
- Fetching data with Effects
- [Bug]: The sandpack bundler aint working HOT 1
- [Bug]: Missing explanation
- [Suggestion]: Reference: component prop list shoud be more readable
- [Suggestion]: Broken link in README.md for react-html package HOT 4
- [Suggestion]: items in the sidebar tree should collapse on clicking.
- [Typo]: Minor typo in Updating Objects in State HOT 2
- Several pages not found in Prerequisites at React Fiber Architecture.
- Link in react console warning is not found
- Broken warning URL in console HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.dev.