在 iPad 上滚动后，我网站的某些内容隐藏在一个白色区域后面

Question

介绍

我们正在开发一个网站，我们希望在一个页面上显示一些简单的图表。 因此我们使用画布来绘制图表。 我知道因此还有其他很棒的库，但我知道我们只需要一个快速而肮脏的解决方案来进行第一次拍摄。 通常我们使用 Typescript 和 React。

该错误发生在 iPad (iOS 8.3) 的 Safari 和 Chrome 43.0 上。 该页面在我的 Windows 7 计算机上的 Firefox、Chrome 43.0、IE 甚至我的 iPhone 4s 上都可以正常工作。

问题描述

我对我如何描述下面的问题不太满意，但我不知道隐藏的内容是否未正确呈现，是否由于任何其他原因被覆盖或未显示。 我只是写了我看到的（或在我的情况下没有看到）。

该页面在 iPad上加载时没有错误。

向下滚动（用一根或两根手指）时，页面会向上滑动。 在第一时刻，我可以看到正确进入视野的内容​​。 不到一秒钟后，滚动前在视口之外的一些内容似乎隐藏在白色区域后面。 隐藏内容位于 div 元素内。 画布元素始终正确显示！

再次向上滚动时，向上滚动之前位于视口之外的内容也会发生同样的情况（加载页面后该内容已正确显示）。 一些向下滚动后未正确显示的内容现在可见，一些仍然隐藏。

我正在使用事件侦听器在必要时调整画布大小。 我检查了事件侦听器，它仅在页面调整大小时才处于活动状态（对于 iPad，这意味着方向已更改）。

代码

这是一个磁贴的HTML代码，包含标题、列表和画布。 这段代码实际上是一个反应组件。

<div class="twocolumn" data-reactid=".0.1.0.$wrap-.0.0.0">
    <div class="column" data-reactid=".0.1.0.$wrap-.0.0.0.0">
        <div class="section" data-reactid=".0.1.0.$wrap-.0.0.0.0.0">
            <div class="section-icon" data-reactid=".0.1.0.$wrap-.0.0.0.0.0.0"></div>
            <span class="section-title" data-reactid=".0.1.0.$wrap-.0.0.0.0.0.1">TITEL</span>
        </div>
        <div class="content" data-reactid=".0.1.0.$wrap-.0.0.0.0.1">
            <span data-reactid=".0.1.0.$wrap-.0.0.0.0.1.0">rumpedibum:</span>
            <ul data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1">
                <li data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1.0">bla bla:</li>
                <li data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1.1">bla bla:</li>
                <li data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1.2">bla bla:</li>
                <li data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1.3">bla bla:</li>
                <li data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1.4">bla bla:</li>
                <li data-reactid=".0.1.0.$wrap-.0.0.0.0.1.1.5">bla bla:</li>
            </ul>
        </div>
    </div>
    <div class="column" data-reactid=".0.1.0.$wrap-.0.0.0.1"><div data-reactid=".0.1.0.$wrap-.0.0.0.1.0">
        <canvas class="linechart-maincanvas" width="438" height="180" data-reactid=".0.1.0.$wrap-.0.0.0.1.0.0"></canvas>
    </div>
    </div>
</div>

一个图块的CSS代码

.twocolumn {
  position: relative;
  margin: 16px;
  padding: 16px;
  border-radius: 3px;
  background-color: #fafafa;
  font-size: 14pt;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.twocolumn > div {
  display: inline-block;
}
.twocolumn > div:first-child {
  padding-right: 10px;
  float: left;
  width: 50%;
}
.twocolumn > div:not(:first-child) {
  float: right;
  width: 50%;
}
.twocolumn > div:not(:first-child) > div {
  height: 180px;    // set canvas hight here
}
/**
 * A section title.
 */
.section {
  width: 100%;
  height: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #999;
  font-size: 20pt;
  padding-bottom: 4px;
}
.section > .section-title {
  font-size: 11pt;
  vertical-align: middle;
}

/**
* This is normal text in the left column
*/
.content {
  color: #555;
  font-size: 11pt;
}

Answer 1

删除

overflow: hidden;

解决了这个问题。 我认为overflow: hidden; 确实导致了问题，因为div.twocolumn没有定义 with 和 height。

这是 iPad 上的错误还是其他平台上的浏览器纠正了我的错误？