overflow-y css property causes content in right column to disappear on some iPads on Safari

Question

I have a layout which contains 2 columns. Everything worked fine on various desktop browsers, however recently we discovered an issue with some iPads where the right column is not showing at all. It seems to be just on random iPads, as we bought 2 new test devices recently at the same store and on the same day and we're seeing it work on 1 and not work on the other.

Through debugging I noticed that if I remove the overflow-y:auto on the right column the content on the right side would show back up on the iPad. However I then lost the ability to scroll on the desktop browser without this property. I tried adding -webkit-overflow-scrolling: touch; as well to the div and that didn't seem to fix the issue. As soon as an overflow-y is present it just doesn't want to show that column on the affected iPads.

I tried to trim a lot of the fat out of the css and code below to get the point across.

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

Answer 1

It looks like switching the way we did the columns is all it took. Instead of using the column-count css properties I used flex columns and the scroll works fine as is.