Enable touch scrolling for mobile view, Bokeh app

Question

I have a web app, created using Bokeh and hosted on Heroku. I recently created a mobile style for the app, viewable here:

https://btac-web-plots.herokuapp.com/avyview?style=snowpacktracker-mobile

However, when viewed on an iOS mobile device, the single-finger touch scrolling does not work. As a hack work-around, I set width: 95% in the .invcontent-wrapper tag of my html file (index.html). This exposes a vertical strip of the background on the right side where the touch scrolling is functional, acting like a traditional scroll bar. I also added up and down arrows to the vertical strip to direct users to use it as a scroll bar.

How can I enable touch scrolling for the entire screen? The issue may be that the returned Bokeh Document does not allow for touch scrolling interaction...?

I am using the directory format in Bokeh (utilizing the Bokeh server), where my index.html Jinja template file contains the following relevant sections:

css:

        {% if display_style|string() == "snowpacktracker-mobile" %}
          <style>
            html {
              width: 100%;
              height: 100%;
            }
            body {
              width: 100%;
              height: 100%;
              margin: auto;
              background-color: lightgray;
              overflow-y: scroll;
              -webkit-overflow-scrolling: touch;
              float: left;
            }
           .invcontent-wrapper {
             padding: 0px;
             min-height: 200px;
             width: 95%; /*allows for exposed background on the side*/
             position: relative;
            }
            container { /*this holds arrows so the user knows to scroll*/
              width: 100%;
              height: 100%;
            }
            .a { /*up arrow*/
              border-style: solid;
              border-width: 0 3px 3px 0;
              border-color: rgba(0,0,0,0.6);
              display: inline-block;
              padding: 3px;
              position: fixed;
              top: 20px;
              right: 1.5%;
              transform: rotate(-135deg);
              -webkit-transform: rotate(-135deg);
            }
            .b { /*down arrow*/
                border-style: solid;
                border-width: 0 3px 3px 0;
                border-color: rgba(0,0,0,0.6);
                display: inline-block;
                padding: 3px;
                position: fixed;
                top: 40px;
                right: 1.5%;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }
          </style>        
        {% endif %}

html:

        {% if display_style|string() == "snowpacktracker-mobile" %}
          <div class="invcontent-wrapper"  id="tbc-id">
            {{ plot_div|indent(8) }} 
            {{ plot_script|indent(8) }}
          </div>
          <div id="container">
            <div class="a"></div>
            <div class="b"></div>
          </div>
        {% endif %}

The id="tbc-id" is referring to the javascript loading spinner I am using (var target = document.getElementById('tbc-id');).

Although a secondary problem, I am also unable to zoom in using the two-finger pinch-out zoom gesture on iOS.

Answer 1

The bug certainly comes from the -webkit-overflow-scrolling: touch; property. You are not the only one experiencing problems with it:

Since updating to IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch

-webkit-overflow-scrolling: touch; breaks in Apple's iOS8

However, in the Safari CSS Reference, Apple seems to say that it is supported on iOs 5.0 and later:

Availability:
Available in iOS 5.0 and later.

Support Level:
Under development

But, we can see in the MDN reference:

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

-webkit-overflow-scrolling - MDN

TL;DR

This is not a coding problem, it comes from this non-standard CSS style. Try removing it and see below on how to enhance scrolling.

Did I helped?

---

Here are some other references:

• WebKit-only properties - MDN

• -webkit-overflow-scrolling: touch; breaks in Apple's iOS8 - SO

  The solution I found was to remove all the CSS that tricks the browser into using the GPU:

   -webkit-transform: translateZ(0px);
   -webkit-transform: translate3d(0,0,0);
   -webkit-perspective: 1000;