Repository navigation
doc: html of api doesn't allow scrolling past larger code blocks on mobile safari #5861
Description
- Subsystem:
doc
users on iPhones cannot scroll past larger code blocks. It looks like a redrawing issue, since browser likely knows the correct size of the whole page.
In the screen that you see me trying to moving up or down, white not having a scroll handle outside of the code block any more
ref nodejs/docs#92 (closes nodejs/docs#92)
Activity
jasnell commentedon Mar 23, 2016
@nodejs/documentation @nodejs/website
silverwind commentedon Mar 23, 2016
I don't have an IOS device to test, but the only thing I can think of is
removing this seemingly unneccessaryoverflow-x: auto;.Edit: nope that'd cause the text to flow outside the pre.
lpinca commentedon Mar 23, 2016
@silverwind it makes the text go outside the
pre, but it fixes the issue on my iPhone.lpinca commentedon Mar 23, 2016
Adding
seems to fix the issue.
kahwee commentedon Mar 23, 2016
Would it be better if we set a
max-height?That way it lets the user still navigate the page can panning out of the code.
We can target this to the smaller screen resolutions.
silverwind commentedon Mar 23, 2016
So, if I understand correctly, the issue is that the
pre's allow horizontal scrolling, while we want the page to scroll vertically. The problem doesn't manifest on Android Chrome because it scales down the font size of the code boxes to the point where no horizontal scrolling is needed.It's probably worth investigating if and how http://devdocs.io/node/ solves this issue.
silverwind commentedon Mar 23, 2016
I think
white-space: pre-wrapandoverflow: automight just be the solution. While it obviously breaks the visual code layout, I think it's a good compromise. Here's devdocs on a small viewport:lpinca commentedon Mar 23, 2016
@silverwind I'm gonna try that.
kahwee commentedon Mar 23, 2016
I think wrapping
preis a good compromise indeed.lpinca commentedon Mar 23, 2016
It works.
lpinca commentedon Mar 23, 2016
Momentum scrolling gives a better scrolling experience though :)
silverwind commentedon Mar 23, 2016
But isn't it just a hack for this issue? I think having readable (and wrapped) code on Android would be nice to have anyways, in contrast to this:
lpinca commentedon Mar 23, 2016
@silverwind it is, but now that I've tried both with and without momentum scrolling I can say that it's a lot better with it on.
I don't know if http://devdocs.io has momentum scrolling enabled but their scrolling works better than ours with
white-space: pre-wraponpretags.Anyway I don't mind, I'm fine with using
white-space: pre-wrap. It seems the correct way to fix this.3 remaining items
lpinca commentedon Mar 23, 2016
@silverwind the pound sign (#) is very small also on the iPhone, I will investigate as soon as I can get back to my MacBook.
doc: fix scrolling on iOS devices
doc: fix scrolling on iOS devices
doc: fix scrolling on iOS devices
doc: fix scrolling on iOS devices
doc: fix scrolling on iOS devices
doc: fix scrolling on iOS devices