Question

我有一个网络应用，使用Bokeh创建并托管在Heroku上。我最近为应用程序创建了一个移动样式，可以在这里查看：

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

但是，在iOS移动设备上查看时，单指触摸滚动功能不起作用。作为黑客攻击，我在{html文件width: 95%的{{1}}标记中设置了.invcontent-wrapper。这会在触摸滚动功能的右侧显示背景的垂直条带，就像传统的滚动条一样。我还在垂直条上添加了向上和向下箭头，以引导用户将其用作滚动条。

如何为整个屏幕启用触摸滚动？问题可能是返回的Bokeh文档不允许触摸滚动交互......？

我在Bokeh中使用directory format（使用Bokeh服务器），我的index.html Jinja模板文件包含以下相关部分：

的CSS：

index.html

HTML：

        {% 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 %}

{% 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 %}指的是我正在使用的javascript加载微调器（id="tbc-id"）。

虽然是次要问题，但我也无法使用iOS上的双指扩大缩放手势进行放大。

Answer 1

该错误肯定来自-webkit-overflow-scrolling: touch;属性。你并不是唯一遇到问题的人：

自更新到IOS8后，-webkit-overflow-scrolling: touch停止了您无法滚动的任何内容，而我迄今为止唯一可以解决此问题的方法是删除-webkit-overflow-scrolling: touch

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

但是，在Safari CSS Reference中，Apple似乎表示它支持iOs 5.0 及更高版本：

<强>状况：
  适用于iOS 5.0及更高版本。

支持级别：
  正在开发中

但是，我们可以在MDN参考中看到：

<强>非标准
  此功能是非标准功能，不符合标准。不要在面向Web的生产站点上使用它：它不适用于每个用户。实施和之间可能存在大的不兼容性，行为可能会在未来发生变化。

-webkit-overflow-scrolling - MDN

TL; DR

这不是编码问题，它来自这种非标准的CSS风格。尝试删除它，并在下面看到如何增强滚动。

我帮了吗？

以下是其他一些参考资料：

WebKit-only properties - MDN

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

我找到的解决方案是删除使用GPU欺骗浏览器的所有CSS：

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

为移动视图启用触摸滚动，Bokeh app

1 个答案:

TL; DR