Prevent 'select' input on iOS 15 Safari from hiding and showing address bar?

user_7459854 0
Viewed 1071

This is really curious. Interacting with select inputs seems to hide/show address bar based on 'perceived scrolling' by the browser.

I understand the behavior for normal content related page scroll, but it doesn't make sense for the address bar to hide/show based on scroll direction when a select input is being interacted with. This is on ios 15.x and while the example below is on an emulator, the original 'bug' was caught on an actual ios device.

Changing scroll position via JS seemingly does nothing in this case, nor does updating overscroll-behavior or touch-action css attributes on the dom elements.

Here's the behavior in question:

enter image description here

safari css html javascript ios
1 Answers

Looks like it is a bug in the iOS 15+ on Safari. There is no issue like that on Chrome. Nevertheless I've found a workaround for this. I've made an example, you can test it here. Just open the link on your iOS device. You can find a git repository with the example on my GitHub.

It is not a good practice, it is just a workaround, so there is your choice whether use it or not.

Also, just for your information: I've discussed with other developers who close to me and we have agreed that it is not very good practise to have scrollable element inside scrollable page. On other platforms also might happen some not predictable glitches. it is better to have another UI elements for that if possible.

user_164291300
Related