doc: fix scrolling on iOS devices #5878

lpinca · 2016-03-23T20:21:01Z

Pull Request check-list

Does make -j8 test (UNIX) or vcbuild test nosign (Windows) pass with
this change (including linting)?
Is the commit message formatted according to CONTRIBUTING.md?

Affected core subsystem(s)

doc

Description of change

Fixes an issue that prevented scrolling from going past large code blocks on iOS devices.

Fixes: #5861

lpinca · 2016-03-23T20:27:24Z

doc/api_assets/style.css

@@ -1,5 +1,6 @@
 /*--------------------- Layout and Typography ----------------------------*/
 html {
+  -webkit-overflow-scrolling: touch;


This enables momentum scrolling. The scrolling experience with it on is a lot better but its use is discouraged.

I've had no issues while testing but we can remove it if we think it will cause problems.

I'm not familar with the way IOS scrolls, but do I understand correctly that momentum scrolling is disabled by default on web pages and enabled in apps?

Yes that's correct web pages, by default, don't have the same inertia apps have.

Hmmm, I think this may have negative effects on macs? we should probably restrict it to some size? (wish there was a better way 😞 )

Like what? I've tried it on my mac, and it doesn't seem to affect any of the browsers I've tested it on (Safari, Chrome, Firefox).

silverwind · 2016-03-23T20:50:32Z

LGTM besides the momentum scrolling, which I have no opinion on.

benjamingr · 2016-03-23T21:28:42Z

Probably dumb question - is there any way I could test this without pulling the branch and building the docs?

The fix looks fine but I want to actually test it on my phone and that's problematic with the networking mechanics on this machine.

lpinca · 2016-03-23T21:33:19Z

@benjamingr You can connect your iOS device to a mac and use Safari dev tools from that mac, don't know if this helps.

lpinca · 2016-03-24T07:23:52Z

doc/api_assets/style.css

@@ -281,7 +282,8 @@ pre {
  vertical-align: top;
  background: #f2f2f2;
  margin: 1em;
-  overflow-x: auto;


We are using white-space: pre-wrap; now so this should be no longer required.

silverwind · 2016-03-24T16:09:09Z

Still LGTM. Any more opinions regarding momentum scrolling?

lpinca · 2016-03-29T09:56:01Z

@silverwind I've found a new way to fix the issue. We can just reset the overflow property on #content and #column1.interior in the media query.

This also makes the scroll works like every other web page so we don't have to enable momentum scrolling.

Question: isn't this stuff redundant? It's already included in the previous case.

silverwind · 2016-03-29T22:33:44Z

Question: isn't this stuff redundant? It's already included in the previous case.

Yeah, definitely redundant. Maybe the (max-width: 1024px) and (orientation: portrait) was meant to be a (max-height: 1024px) and (orientation: portrait), but don't think such a rule would make much sense either way. Probably best to drop it.

Will check out your other changes soon.

silverwind · 2016-03-30T22:27:39Z

LGTM

lpinca · 2016-03-31T06:19:21Z

I've rebased against master and squashed commits into a single one.

Fixes an issue that prevented scrolling from going past large code blocks on iOS devices. Fixes: nodejs#5861 PR-URL: nodejs#5878

jasnell · 2016-04-01T16:33:47Z

LGTM if @nodejs/documentation folks are happy.

eljefedelrodeodeljefe · 2016-04-01T17:15:15Z

LGTM

silverwind · 2016-04-03T13:56:03Z

@lpinca something about this recent change makes text very tiny on Android Chrome, it looks like Chrome switches to non-mobile mode now.

I'm thinking we should maybe specify

<meta name="viewport" content="width=device-width, initial-scale=1">

and then remove the font-size rules in the media queries (the default 1.8em on #content looks acceptable on my Nexus with the viewport tag, everything above seems to big).

lpinca · 2016-04-03T15:44:50Z

@silverwind like this?

lpinca · 2016-04-03T15:57:49Z

Hmm doesn't work on the iPhone with the latest commit.

silverwind · 2016-04-03T20:57:12Z

Works for me on Android at least. Oh, and I noticed another minor issue with unbalanced margins on those <pre>s. I'd suggest removing this rule:

@media only screen and (max-width: 1024px) { pre { margin-right: 0; } }

lpinca · 2016-04-04T05:59:27Z

We can't really use

<meta name="viewport" content="width=device-width, initial-scale=1">

as it will reduce the screen size by half on retina displays.
Can't we just tweak the font size?

I'd suggest removing this rule:

@media only screen and (max-width: 1024px) { pre { margin-right: 0; } }

+1 for the margin fix.

lpinca · 2016-04-04T07:15:33Z

I've removed the viewport meta tag and increased the font size in the media queries. It works fine on my iPhone. Waiting for feedbacks.

silverwind · 2016-04-09T16:17:29Z

Looking good on Android too. LGTM!

silverwind · 2016-04-09T16:20:47Z

Thanks! Landed in d2577de.

Fixes an issue that prevented scrolling from going past large code blocks on iOS devices. Also fixes a few minor styling issues that came up in the discussion. Fixes: #5861 PR-URL: #5878 Reviewed-By: Roman Reiss <[email protected]> Reviewed-By: James M Snell <[email protected]> Reviewed-By: Robert Lindstädt <[email protected]>

lpinca reviewed Mar 23, 2016
View reviewed changes

mscdex added the doc Issues and PRs related to the documentations. label Mar 23, 2016

lpinca reviewed Mar 24, 2016
View reviewed changes

silverwind mentioned this pull request Mar 24, 2016

add momentum scrolling nodejs/nodejs.org#414

Closed

lpinca mentioned this pull request Mar 28, 2016

Make use of overflow-x: scroll in release page nodejs/nodejs.org#609

Merged

lpinca force-pushed the gh-5861 branch from 908a6c7 to 2926df4 Compare March 31, 2016 06:16

lpinca force-pushed the gh-5861 branch from 2926df4 to 58dd151 Compare March 31, 2016 06:17

doc: fix scrolling on iOS devices

a9178fe

Fixes an issue that prevented scrolling from going past large code blocks on iOS devices. Fixes: nodejs#5861 PR-URL: nodejs#5878

lpinca force-pushed the gh-5861 branch from 58dd151 to a9178fe Compare March 31, 2016 06:22

jasnell added the lts-watch-v4.x label Apr 1, 2016

fixup! address @silverwind comment

c38d062

fixup! make the text bigger on small screens

662a561

silverwind closed this Apr 9, 2016

lpinca deleted the gh-5861 branch April 9, 2016 16:24

MylesBorins added land-on-v4.x and removed lts-watch-v4.x labels Apr 11, 2016

MylesBorins mentioned this pull request Apr 11, 2016

V4.4.3 proposal #6149

Merged

MylesBorins mentioned this pull request Apr 20, 2016

V5.10.2 proposal #6311

Closed

This was referenced Apr 21, 2016

V5.11.0 proposal #6321

Closed

V5.11.0 proposal #6322

Closed

lpinca mentioned this pull request Sep 20, 2017

doc: maintain font size in narrow windows #15436

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doc: fix scrolling on iOS devices #5878

doc: fix scrolling on iOS devices #5878

lpinca commented Mar 23, 2016

lpinca Mar 23, 2016

silverwind Mar 23, 2016

lpinca Mar 23, 2016

Fishrock123 Mar 23, 2016

lpinca Mar 24, 2016

silverwind commented Mar 23, 2016

benjamingr commented Mar 23, 2016

lpinca commented Mar 23, 2016

lpinca Mar 24, 2016

silverwind commented Mar 24, 2016

lpinca commented Mar 29, 2016

silverwind commented Mar 29, 2016

silverwind commented Mar 30, 2016

lpinca commented Mar 31, 2016

jasnell commented Apr 1, 2016

eljefedelrodeodeljefe commented Apr 1, 2016

silverwind commented Apr 3, 2016

lpinca commented Apr 3, 2016

lpinca commented Apr 3, 2016

silverwind commented Apr 3, 2016

lpinca commented Apr 4, 2016

lpinca commented Apr 4, 2016

silverwind commented Apr 9, 2016

silverwind commented Apr 9, 2016

doc: fix scrolling on iOS devices #5878

doc: fix scrolling on iOS devices #5878

Conversation

lpinca commented Mar 23, 2016

Pull Request check-list

Affected core subsystem(s)

Description of change

lpinca Mar 23, 2016

Choose a reason for hiding this comment

silverwind Mar 23, 2016

Choose a reason for hiding this comment

lpinca Mar 23, 2016

Choose a reason for hiding this comment

Fishrock123 Mar 23, 2016

Choose a reason for hiding this comment

lpinca Mar 24, 2016

Choose a reason for hiding this comment

silverwind commented Mar 23, 2016

benjamingr commented Mar 23, 2016

lpinca commented Mar 23, 2016

lpinca Mar 24, 2016

Choose a reason for hiding this comment

silverwind commented Mar 24, 2016

lpinca commented Mar 29, 2016

silverwind commented Mar 29, 2016

silverwind commented Mar 30, 2016

lpinca commented Mar 31, 2016

jasnell commented Apr 1, 2016

eljefedelrodeodeljefe commented Apr 1, 2016

silverwind commented Apr 3, 2016

lpinca commented Apr 3, 2016

lpinca commented Apr 3, 2016

silverwind commented Apr 3, 2016

lpinca commented Apr 4, 2016

lpinca commented Apr 4, 2016

silverwind commented Apr 9, 2016

silverwind commented Apr 9, 2016