overflow-y not working in safari inside a modal

Question

Ok here is the html:

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
    <table id="filterOptionsTable" class="table table-striped table-hover">
    </table>
</div>

Basically, I am dynamically adding rows to the table and I would like the container to scroll the overflow. First I tried the obvious:

#filterOptionsContainer {
    overflow-y: auto;
}

and that works fine everywhere except for Safari on iOS mobile devices.

Since then I have spent hours trying every combination of styles I can think of and read about but I cannot get standard overflow scrolling. The closest I got was getting the scrollbar to show (it wasn't actually scrolling though).

All help is appreciated. It is hard for me to believe that it is not possible to scroll the contents of a div in a modal in Safari...

Solution 1

I resolved this by switching to a multiselect (and hiding the scrollable div) on mobile devices (so no real solution). Thanks for all the help everyone.

Edit: I have finally figured this out. Basically what happened was that after I switched to using a multiselect, it too was acting weirdly in IOS devices when using Safari.

In examining further a colleague of mine noticed dojo touch events on both the scrollable div and on the multiselect (the template I am using uses dojo). I started looking around in the template's source to figure out why these events were being attached to all these elements and I noticed a dojo module called "dojo/touch". After removing this module from the project, the elements are working fine in Safari.

The take away is that 'dojo/touch' and IOS Safari are totally incompatible.

Solution 2

Try applying this inline , or through a Jquery Script

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

or through a Jquery Script

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});

Solution 3

I don't have any IOS product to verify this, but it seems like overflow: auto is a known Safari bug.

Try this:

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Solution 4

You can try this. It's working fine with Safari.

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Solution 5

If none of the solutions work you could try flex: 1 1; This has cross-browser support.

View more solutions