Reactjs.org: Mobile layout scrolls horizontally

Created on 7 Oct 2017 · 19Comments · Source: reactjs/reactjs.org

This shouldn't happen 😄

mobile-layout-hor-scorll-bug

beginner good first issue website

Source

bvaughn

All 19 comments

Weird, I'm unable to reproduce this. Tested by opening https://reactjs.org/docs/hello-world.html on Chrome Devtools with iPhone 5 dimensions.

yangshun on 7 Oct 2017

👍1

I'm also unable to reproduce this in either Chrome Devtools or in an actual Samsung Galaxy S6

fpoumian on 7 Oct 2017

Cannot reproduce it either

cyan33 on 8 Oct 2017

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.)

bvaughn on 8 Oct 2017

@bvaughn Oh I got it. I'll work on it right now

cyan33 on 8 Oct 2017

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!

bvaughn on 8 Oct 2017

@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 a max-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.

cyan33 on 8 Oct 2017

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.

bvaughn on 8 Oct 2017

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?

joecritch on 8 Oct 2017

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.

bvaughn on 8 Oct 2017

Are we still following up this issue? I'm kind of stuck now;(

cyan33 on 11 Oct 2017

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. 😄

bvaughn on 11 Oct 2017

I figured out that removing those margin-left: auto and margin-right: auto from header would fix the problem on most pages.

screenshot_1

Perharps I can open a PR when i get this to work.

SadPandaBear on 13 Oct 2017

👍1

cc @joecritch in case he knows of anything that might break as a result of removing those 😁

bvaughn on 13 Oct 2017

👍1

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:_
screenshot_1

_Horizontal scrollable layout:_
screenshot_2

Maybe @joecritch knows something about these Chrome DevTools tricks?

SadPandaBear on 13 Oct 2017

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.

bvaughn on 16 Oct 2017

👍1

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).

SadPandaBear on 18 Oct 2017

Can't reproduce on any of these devices: