在 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 上的錯誤還是其他平台上的瀏覽器糾正了我的錯誤？