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 reactjs.org.
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 reactjs.org.
cc @joecritch in case he knows of anything that might break as a result of removing those π
from reactjs.org.
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 reactjs.org.
I think it's safe to close this issue given the zoom comments above and the general difficult reproducing it. π Thanks all!
from reactjs.org.
I'm also unable to reproduce this in either Chrome Devtools or in an actual Samsung Galaxy S6
from reactjs.org.
Cannot reproduce it either
from reactjs.org.
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 reactjs.org.
@bvaughn Oh I got it. I'll work on it right now
from reactjs.org.
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 reactjs.org.
@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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
Are we still following up this issue? I'm kind of stuck now;(
from reactjs.org.
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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
Related Issues (20)
- [Suggestion]: Add a search page (not just a modal) HOT 1
- [Mistake]: One of the examples in the docs is performing side effect in render? HOT 2
- [Bug]: Can not access the react.dev website HOT 11
- [Bug]: Issue with Sandpacks HOT 7
- Add language switcher to the design in react.dev
- [Suggestion]: Add example for retry with the `use` hook and an error boundary
- [Suggestion]: How to use local language search on a translation website
- [Suggestion]: Clarification on react.cache Usage in Server Requests
- [Typo]: Possible incorrect info HOT 1
- [Suggestion]: Add a new page for how to communicate between components. HOT 4
- [Suggestion]: "falsy" values not in the new documentation HOT 2
- [Bug]: sidepanel is blocking main content HOT 3
- [Suggestion]: Change the error message "Objects are not valid as a React child (found: object with keys {aaa, bbb}). If you meant to render a collection of children, use an array instead.
- [Mistake]: getVisibleTodos() does not re-run (and does not print any logs) when you type into the input to begin with! HOT 2
- δΈζζζ‘£ε·²η»uiεε½’δΊ HOT 1
- Class domain layer HOT 5
- Renren_kim86
- te.react.dev Maintainer's Issue HOT 3
- [Bug]: Search functionality not working correctly on react.dev in Safari on iOS real device (iPhone 12 Pro) HOT 2
- [Bug]: Search functionality not working correctly on react.dev in Safari on iOS real device (iPhone 12 Pro) HOT 3
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 reactjs.org.