y-css属性的溢出导致右栏中的内容在Safari上的某些iPad上消失

问题描述

我有一个包含2列的布局。在各种台式机浏览器上一切正常，但是最近我们发现某些iPad出现问题，右栏根本没有显示。它似乎只是在随机的iPad上使用，因为我们最近在同一家商店和同一天购买了2台新的测试设备，而我们发现它只能在1台上运行，而在另一台上不工作。

通过调试，我注意到如果删除右列的overflow-y：auto，则右侧的内容将显示在iPad上。但是，然后我失去了没有此属性的在桌面浏览器上滚动的能力。我尝试添加-webkit-overflow-scrolling：touch;对div也是如此，但这似乎无法解决问题。出现溢出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;
}

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

解决方法

一切似乎都需要切换我们处理列的方式。我没有使用column-count css属性，而是使用flex列，并且滚动按原样可以正常工作。