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

Question

简介

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

在Safari和Chrome 43.0的iPad（iOS 8.3）上发生错误。该页面在我的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上的错误还是其他平台上的浏览器纠正了我的错误？