doc: html of api doesn't allow scrolling past larger code blocks on mobile safari

[eljefedelrodeodeljefe]

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

[jasnell]

@nodejs/documentation @nodejs/website

[silverwind]

I don't have an IOS device to test, but the only thing I can think of is removing this seemingly unneccessary overflow-x: auto;.

Edit: nope that'd cause the text to flow outside the pre.

[lpinca]

@silverwind it makes the text go outside the pre, but it fixes the issue on my iPhone.

[lpinca]

Adding

* {
  -webkit-overflow-scrolling: touch;
}

seems to fix the issue.

[kahwee]

Would it be better if we set a max-height?

pre.sh_sourceCode {
  max-height: 400px;
}

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]

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]

I think white-space: pre-wrap and overflow: auto might 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]

@silverwind I'm gonna try that.

[kahwee]

I think wrapping pre is a good compromise indeed.

[lpinca]

I think white-space: pre-wrap might just be the solution.

It works.

[lpinca]

Momentum scrolling gives a better scrolling experience though :)

[silverwind]

Momentum scrolling gives a better scrolling experience though :)

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]

@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-wrap on pre tags.

Anyway I don't mind, I'm fine with using white-space: pre-wrap. It seems the correct way to fix this.

[lpinca]

I would say let's use both momentum scrolling and pre-wrap but the use of -webkit-overflow-scrolling is discouraged so forget about that.

[silverwind]

Go for it. It's a big improvement to Android too in terms of readability. If momentum-scrolling causes no side-effects, it's probably fine. I think it has been suggested before too.

Some other related suggestions:

• word-break: break-all on pre to fix a layout overflow (seen in process).
• Maybe decrease the font size for pre on small viewports a notch.
• Investigate why the section # is so tiny, at least on Android.

Here's Android with white-space: pre-wrap:

[lpinca]

@silverwind the pound sign (#) is very small also on the iPhone, I will investigate as soon as I can get back to my MacBook.