Html overflow-y css属性导致Safari上某些iPad上右列中的内容消失

我有一个包含两列的布局。在各种桌面浏览器上，一切都很好，但是最近我们发现一些iPad出现了一个问题，右边的列根本没有显示出来。这似乎只是在随机的iPad上，因为我们最近在同一家商店和同一天购买了2台新的测试设备，我们看到它在1台上工作，而在另一台上不工作

通过调试，我注意到如果我删除右边的overflow-y:auto列，右边的内容就会显示在iPad上。但是，如果没有此属性，我就无法在桌面浏览器上滚动。我尝试添加-webkit溢出滚动：touch；对div也是如此，但这似乎并没有解决问题。一旦出现overflow-y，它就不想在受影响的iPad上显示该列

我试图从下面的css和代码中删去很多内容，以使大家明白这一点

@media only screen and (min-width: 50em)
 #studentArticle {
    column-count: 2;
    -webkit-column-count: 2;
    column-gap: 6em;
    position: relative;
}

#page1 {
    height: 100%;
    overflow-y: auto;
}

#page2 {
    height: 100%;
    overflow-y: auto;
}

@Html.Partial（“\u HeaderContent”）
@Html.Partial（“\u Page1Content”）
@Html.Partial（“\u StudentQuestion”）
看起来我们只需要改变我们做专栏的方式。我没有使用column count css属性，而是使用了flex columns，滚动效果很好

    <div id="book_wrapper" style="display:none;">
        <div id="book_container">
            <section class="open-book">
                <header id="studentHeader">
                    @Html.Partial("_HeaderContent")
                </header>
                <article id="studentArticle">
                    <div id="page1">
                       @Html.Partial("_Page1Content")
                    </div>

                    <div id="page2">
                        <div style="display:inline-block;width:98%;height:98%;overflow-y:auto;-webkit-overflow-scrolling: touch;">
                            @Html.Partial("_StudentQuestion")
                        </div>
                    </div>
                </article>

                <footer style="column-count: unset">
                    <div id="buttondiv">
                        <button class="btn btn-success btn-lg hideWhenReading continueBtn" 
                    </div>
                </footer>

            </section>
        </div>
    </div>