0
213
ViewsPrevent 'select' input on iOS 15 Safari from hiding and showing address bar?
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:
1 answers
Answer question0
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.