Giter Site home page Giter Site logo

Comments (19)

yangshun avatar yangshun commented on March 29, 2024 1

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.

SadPandaBear avatar SadPandaBear commented on March 29, 2024 1

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.

from react.dev.

bvaughn avatar bvaughn commented on March 29, 2024 1

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

from react.dev.

bvaughn avatar bvaughn commented on March 29, 2024 1

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.

bvaughn avatar bvaughn commented on March 29, 2024 1

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.

fpoumian avatar fpoumian commented on March 29, 2024

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

from react.dev.

cyan33 avatar cyan33 commented on March 29, 2024

Cannot reproduce it either

from react.dev.

bvaughn avatar bvaughn commented on March 29, 2024

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.

cyan33 avatar cyan33 commented on March 29, 2024

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

from react.dev.

bvaughn avatar bvaughn commented on March 29, 2024

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.

cyan33 avatar cyan33 commented on March 29, 2024

@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:

  1. the <body> is missing a max-width: 100%;
  2. 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.

bvaughn avatar bvaughn commented on March 29, 2024

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.

joecritch avatar joecritch commented on March 29, 2024

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.

bvaughn avatar bvaughn commented on March 29, 2024

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.

cyan33 avatar cyan33 commented on March 29, 2024

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

from react.dev.

bvaughn avatar bvaughn commented on March 29, 2024

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.

SadPandaBear avatar SadPandaBear commented on March 29, 2024

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?

from react.dev.

SadPandaBear avatar SadPandaBear commented on March 29, 2024

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.

el1f avatar el1f commented on March 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.