mobile scrolling, page jumps to top

Question

My web application is here: https://www.snowpacktracker.com/btac/snowpacktracker

On desktop, everything with scrolling is fine. However, on mobile (particularly on an iPad), any attempt to touch scroll down snaps the page back to the top. I have noticed that if I fight past the jumpiness (which is difficult) and get the page to scroll down so the header is not visible, then scrolling works normally, so perhaps something in the header is responsible. For whatever reason, I am unable to reproduce this on a desktop with devtools set to mobile dimensions, only reproducible on a mobile device (but maybe this is just me not using devtools correctly).

Here is a screen recording (on iPad) to demonstrate the problem: https://vimeo.com/661613444

Here is some minimal info on my setup:

Bokeh web application, using Flask to render the Bokeh content within an html template (base.html). The header uses a Bootstrap container-fluid class, in addition to Bootstrap classes for the navigation buttons. I also have a custom style.css used to over-ride certain classes in the base template. Of relevance in style.css might be:

.placeholderbokehapp-snowpack {
  background-color: white;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  min-height: 300px;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  min-width: 1100px;
}

Besides imported js libraries for Bokeh, jquery, popper and bootstrap, I have custom js to define the spinning wheel for loading, and a resize sensor to stop the spinning wheel when the page dimension changes.

bokeh==2.4.1, Flask==1.1.2, jquery==3.3.1, popper==1.14.3, bootstrap==4.1.3

Happy to provide any additional details as needed.

@sanket no solution has been found, unfortunately this is still a problem for me — pjw, Nov 26 '22 at 10:56

score 2 · Answer 1 · answered Nov 27 '22 at 13:55

2

Whenever you scroll up browser address bar hides which shifts the webpage position. You can see this video

A simple fix is to prevent the address bar from hiding.

html {
  overflow: hidden;
  width: 100%;
}
body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

The above code is copied from the stackoverflow

answered Nov 27 '22 at 13:55

Adding this code to my `style.css` does solve the mobile scrolling problem, but then on desktop, the `overflow: hidden;` prevents scrolling altogether, and the `position: fixed;` fixes the width of the display, leaving a gap on the right side. But if I remove those elements, then the mobile scrolling problem returns. So, this answer really doesn't work. – pjw Dec 02 '22 at 21:17
If I could apply this only to mobile users (recognize user agent, etc), then it would work great. – pjw Dec 03 '22 at 11:10

score 2 · Answer 2 · answered Nov 29 '22 at 17:09

It is possible that the resize event within bokeh-2.4.1.min.js is being triggered whenever ios shows/hides the address bar.

You can sort of replicate this by:

View the site in Chrome's Device Toolbar
Make the viewport small enough that the content overflows
Scroll down
Vertically resize the viewport

You will see the content scroll snaps to top.

Unfortunately, if this is proven to be the problem I don’t have a solution. Perhaps there is a way to disable ios's showing/hiding of the address bar. Failing that, you may have to edit bokeh.js to stop it from changing the scroll-position on resize.

Yes this is a good point. Bokeh is up to `3.0.2` now, so I may try upgrading. — pjw, Dec 02 '22 at 22:16

score 0 · Answer 3 · answered Nov 27 '22 at 13:59

If the page scroll works on a desktop and the problem that arises in iOS , which beloved can be reasoned with.

Software bug found in from iOS 15.5 or a glitch third-party app. -- After updating to iOS 15.5, some iPhones always return to the topmost of any pages or app while scrolling, as if someone is always touching the topmost area of the iPhone. If you’re dealing with a bug and the problems started after the iOS 15.5 update, you might want to update to iOS 15.6
Hardware problem triggered by a fall.
Worn out screen protector that could cause ghost touches at the top of the green.
The same goes for a too-tight phone case or bumper.

The best solution, if you don't fix the problem, is to use the Nav element sticky.

<div class="sticky-top">...</div>

OR

Shrink a Header on Scroll >

Header

<div id="header">Header</div>

Add CSS:

.container-fluid {
  padding: 50px 10px; /* Some padding */
  text-align: center; /* Centered text */
  font-size: 90px; /* Big font size */
  position: fixed; /* Fixed position - sit on top of the page */
  top: 0;
  width: 100%; /* Full width */
  transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}

Add JavaScript:

// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  } else {
    document.getElementById("header").style.fontSize = "90px";
  }
}

score 0 · Accepted Answer · answered Dec 08 '22 at 20:22

0

Upgrade Bokeh to bokeh==3.0.2 (or latest). No additional html, css or js is needed.

answered Dec 08 '22 at 20:22

pjw

2,133
3
27
44

mobile scrolling, page jumps to top

4 Answers4