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

Question

我有一个使用Bokeh创建并在Heroku上托管的Web应用程序.我最近为应用程序创建了一个移动样式,可以在这里查看:

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

但是,在iOS移动设备上查看时,单指触摸滚动不起作用.作为一个黑客解决方法,我设置了我的html文件()width: 95%的.invcontent-wrapper标签index.html.这会在触摸滚动功能的右侧显示背景的垂直条带,就像传统的滚动条一样.我还在垂直条上添加了向上和向下箭头,以引导用户将其用作滚动条.

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

我在Bokeh中使用目录格式(使用Bokeh服务器),我的index.htmlJinja模板文件包含以下相关部分:

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

这id="tbc-id"是指我正在使用的javascript加载微调器(var target = document.getElementById('tbc-id');).

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

Answer 1

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

自从更新到 IOS8 以来，-webkit-overflow-scrolling: touch你就无法滚动了，到目前为止我能够解决这个问题的唯一方法就是删除-webkit-overflow-scrolling: touch

-webkit-overflow-scrolling：触摸；Apple iOS8 中的漏洞

然而，在Safari CSS Reference中，Apple 似乎说它在 iOs 5.0及更高版本上受支持：

可用性：
适用于 iOS 5.0 及更高版本。

支持级别：
正在开发中

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

非标准
此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

-webkit-溢出滚动-MDN

长话短说

这不是一个编码问题，它来自于这种非标准的CSS样式。尝试将其删除，并参阅下文了解如何增强滚动功能。

我有帮忙吗？

以下是一些其他参考：

• 仅限 WebKit 的属性 - MDN

• -webkit-overflow-scrolling：触摸；Apple iOS8 中的漏洞 - SO

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

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