Cannot view PEP docs on mobile Chrome and Safari

[cjerdonek]

For a while I've noticed a serious problem that makes pages like the following unreadable on my mobile device:

https://www.python.org/dev/peps/pep-0440/

It happens for me with both Chrome and Safari on the latest iOS 8.1.2, though I believe it happened for me on older iOS versions, too. An Android user has also reproduced the issue.

After the page is fully loaded, if I scroll down, say, halfway through the page, the browser will jump back to the very top. This effectively makes it impossible to read the page. I have never noticed this issue with any page not hosted on python.org.

[smontanaro]

On Fri, Jan 2, 2015 at 10:23 AM, Chris Jerdonek notifications@github.com wrote:

After the page is fully loaded, if I scroll down, say, halfway through the page, the browser will jump back to the very top. This effectively makes it impossible to read the page. I have never noticed this issue with any page not hosted on python.org.

I tried with PEP 440 (your example), PEP 1 and PEP 8 on my Android phone. I didn't encounter this problem with any of them. Does it only happen when reading PEPs? Can you whittle down one of these pages to a smaller example which demonstrates the problem?

Thx,

Skip Montanaro

[cjerdonek]

Here is another page (non-PEP) that it happens on: https://www.python.org/psf-landing/

[cjerdonek]

On the PSF page, for example, if I scroll down, as soon as the scrolling stops, it resets back to the top.

[smontanaro]

On Fri, Jan 2, 2015 at 11:29 AM, Chris Jerdonek notifications@github.com wrote:

On the PSF page, for example, if I scroll down, as soon as the scrolling stops, it resets back to the top.

Thanks. I was able to reproduce this on my Android phone (using Chrome) as follows. Scroll part of the way down the page. Let everything stop. Scroll up ever-so-slightly. Zip! It scrolls all the way back to the top. I wonder if it has anything to do with the "Back to Top" link at the bottom of the page? I see that the non-mobile version appears not to have such a link. Actually, it's there, but appears to be hidden:

<span aria-hidden="true" class="icon-arrow-up">▲ Back to Top

Skip

[RedKrieg]

I have this problem on chrome 40 mobile as well. It makes nearly every page on python.org unbrowseable.

[bluesoft83]

I can confirm this to. It is happening on my android phone and tablet in chrome. It is really annoying.

[it3xl]

The trouble makes a jumping browser's bar at the top of window. It looks like. Opera, Chrome have it now. Android. All pages of python.org in the mobile view (Responsive web design) pressure me to see only top of pages. Any partial small scrolling up and down cause jumping at the top of pages.

[smontanaro]

Any progress on this bug? It's been confirmed multiple times since Chris first reported it over two months ago.

[empyrical]

You can also reproduce this bug on desktop by shrinking your browser window so it uses the mobile layout, and then adjusting the height of the browser window

[berkerpeksag]

@ArrestedDevelopment could you please give more details? I would like to fix this, but a) I don't use a smartphone b) I couldn't reproduce it on desktop by using Chrome's responsive design mode (also tried to shrink the browser window) So I need to reproduce the problem before trying to fix it :)

[empyrical]

@berkerpeksag I made a quick gif/recording of the problem. It shows up in Firefox too:

[lethosor]

In that case, perhaps the hiding and showing of the toolbar when scrolling in some mobile browsers is triggering this.

[berkerpeksag]

@ArrestedDevelopment thank you! :) Now I understand the problem and can reproduce it. I think the problem is somewhere in https://github.com/python/pythondotorg/blob/master/static/js/script.js#L56 (most likely in line 70 or line 89) Will try to investigate tomorrow.

[frankwiles]

@jhogue could you also take a look at this one when you get a chance? It's a pretty bad usability situation.

[refi64]

More info:

It primarily happens on mobile devices. If you scroll up just a pinch, it jumps straight to the top.

[refi64]

It also seems to be something browser-specific. Chrome for Android has the issue; Lightning doesn't.

[refi64]

I believe this line is the culprit:

$('body, html').animate({ scrollTop: $('#python-network').offset().top }, 300);

I believe one of the event handlers (likely the resize event) is being fired incorrectly. I'm pretty sure the jQuery animation should not be fired when the screen is rotated or resized; only when it's loaded initially (websites that scroll when I rotate the phone screen tend to get on people's nerves).

[lethosor]

@kirbyfan64 yes - that's addressed in two places in #788.

[berkerpeksag]

Thanks to @nirgn975, we have a fix now. It would be amazing if you could test it at https://staging.python.org/

[cjerdonek]

I confirmed the fix as follows:

• works: https://staging.python.org/psf-landing/
• doesn't work yet (for comparison without the fix): https://www.python.org/psf-landing/

Thanks!

[it3xl]

Android Chrome - fail.

[smontanaro]

On Thu, Jul 23, 2015 at 8:37 AM, Berker Peksag notifications@github.com wrote:

Thanks to @nirgn975 https://github.com/nirgn975, we have a fix now. It would be amazing if you could test it at https://staging.python.org/

Still failing for me using Chrome Beta, visiting

https://staging.python.org/dev/peps/pep-0008/

chrome://version tells me I am using "44.0.2403.104 (Official Build) beta (32-bit)", along with a whole bunch of other stuff I'm not going to attempt to type.

Skip

[it3xl]

Android Chrome - fail. Case: Scroll to bottom anywhere. Little scroll to to. Fail. Full jump to the page's head.

[it3xl]

Little scroll to top.

[davebarkerxyz]

Can we consider removing the scroll animation altogether? It's hard to see what value it adds, even when it's not causing problems.

[refi64]

Works for me! Other than this weird issue where, when jump down to the menu and try to scroll up a little, it scrolls back down a bit.

To those for whom it doesn't work: beware that some links on the staging site link back to the main one.

[it3xl]

Strange. Now it works fine. Maybe I lose something. Or it's some caching.

Android, Chrome: DONE

[smontanaro]

Despite the fact that it had been ages since I visited PEPs on my phone (probably only ever to test this bug), it appears it was a caching issue. I restarted my phone, cleared the cache and tried again. No problem.

Skip

[youtux]

The fix has still the following issue on my iPhone 5s iOS 8.4: Go to https://staging.python.org/ Scroll to the middle of the page Rotate the device in landscape Rotate back to portrait -> the page scrolls automatically to the top

[refi64]

@youtux Same here on Chrome for Android.

[nonZero]

Some cache busting can help.

[it3xl]

Yeah, it has trouble with "portrait-landscape-portrait" smartphone rotation. The page would be scrolled upper and to the top at the end (...-portrait). ... Forget and stay calm? ))

[berkerpeksag]

@youtux yes, that's expected since we only removed the scroll animation for the window.resize event. I think @davb5's suggestion sounds good.

[berkerpeksag]

@youtux @lepot311 could you please test https://staging.python.org/ again? Just pushed another commit.

[refi64]

@berkerpeksag Works for me.

[empyrical]

Works great for me too, awesome work!

[youtux]

It works! Great work!

[cessor]

Works, loving it! Finally I can read up on generators/coroutines on the loo :D thank you for your work!

[berkerpeksag]

Thanks for testing, all! Just deployed to prod.

[lac22]

Somebody wrote webmaster with this problem on his IPhone 6. I told him to clear his cache and try again. He says works fine in staging area, but not in production. Are we sure this really for deployed?

[berkerpeksag]

Yes, those two commits are in the release branch: https://github.com/python/pythondotorg/commits/release Could be a CDN/cache issue. Just purged /static/js/script.js.

[cjerdonek]

This issue still seems to be present in some form. For example, go to the following page:

https://www.python.org/dev/peps/pep-0495/

and scroll down a bit (e.g. to the figure in the abstract). Then pinch to zoom in on the picture and zoom out. (You may need to zoom in and out a few times. It doesn't seem to happen every time.) When I zoom in and out, the page pops back to the top. I noticed this in the normal course of reading a PEP and zooming in and out on some words to see the screen better.

[empyrical]

Yeah, the viewport size changes caused by zooming or scrolling in Chrome (which hides/shows the address bar) is what's causing that bug. There must be stale JS running on Python.org because it's still buggy there for me - but works fine on the staging link linked above

[cjerdonek]

Actually, I can still reproduce even when restricting to scrolling up and down (no zooming). This is on an iPhone 5S (after clearing the cache and resetting my phone) with the latest Chrome 44.0.2403.67.