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

导言

我们正在开发一个网站，我们想在一个页面上显示一些简单的图表。因此，我们使用画布绘制图表。我知道还有其他很棒的库，但是我知道我们需要一个快速而肮脏的解决方案。通常我们使用Typescript并做出反应

该错误发生在Safari和Chrome43.0中的iPad（iOS 8.3）上。该页面在Firefox、Chrome43.0、IE甚至iPhone4S中的Windows7电脑上运行良好

问题描述

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

页面在iPad上加载时不会出错。

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

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

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

代码

下面是一个tile的HTML代码，包含标题、列表和画布。这段代码实际上是一个react组件

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

移除

overflow: hidden;

解决了这个问题。我认为溢出：隐藏div.twoocolumn没有定义with和height，因此code>确实导致了问题

---

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

你能尝试在最小的环境中重现这个问题吗？这在Safari中并不少见。您是否在StackOverflow搜索过类似的问题？如果没有完整的复制，很难说是什么导致了它。在旧版本的Safari中，在某些情况下似乎是由于内存使用。通常我建议您从所有css选择器中删除

，因为react通常会在页面上使用/附加自己的html元素。@Morhaus:我会试试的。@WiredPairie:我已经找到了一个解决方案，有几个滚动问题，但没有任何帮助。Safari和Chrome都是最新的，它们都有这种情况（我认为它们有相同的渲染引擎）。

overflow: hidden;