iOS overflow scroll is not working on drop down menu

Question

There is a script for input and select fields https://joshuajohnson.co.uk/Choices/. I want to use it to work with select fields with many options. Everything works fine except scrolling through options on iOS iPhoneX. It is imposible to scroll in drop domen select (whole page is scrolling).

Drop down is a div with visibility:hidden. After you click the field it gets visibility:visible. What is strange the scroll is working fine when base visibility is set to visibie (when drop down is visible after loading the page).

Any idea what is the problem? How to fix it?

ps. On iphone 6 & 8 it is working fine.

Answer 1

I figuret that out.

If the element is hidden by visibility:hidden, and next to show this element it is overwrite by visibility:visible, you can't scroll through this elemet on iOS 13 iPhone X.

The solution is to hide element by adding position:absolute; top:-9999px; and show by overwrite it with top:0;

I don't know why it works, but it works :)

This does not work:

.dropdownwithscroll {
visibility:hidden;
}

.dropdownwithscroll.active {
visibility:visible;
}

This work:

.dropdownwithscroll {
position:absolute;
top:-9999px;
}

.dropdownwithscroll.active {
top:0;
}