overflow-y not working in safari inside a modal

Answer 1

You can set overflow-y:hidden; after overflow auto, and on safari at least that rule will be applied. Ref.

Answer 2

you can try this, it work fine for me

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

Answer 3

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

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

Answer 4

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.

Answer 5

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"
});

Answer 6

For future readers, overflow does not work on safari with display: flex You must use display: block