I have a hard to debug issue where a click on an input element behaves completely different on my Samsung S10 than in my desktop Chrome browser (also when using device testing tools).
It can be seen live here: www[dot]huurwoningen[dot]net/test2.aspx
I've also created a JSFiddle to test it (although I find JSFiddles hard to test on an actual mobile device).
Here's how to test:
- on a small mobile design (max-width: 56em) a blue filter bar appears at the bottom of the screen
- Click it to show all filters, a popup menu appears (you can go back to results by clicking button "Bekijk resultaten")
- Click "+ Specificeer" at the bottom of that screen
- In the small range specification popup that appears click the first input element (placeholder="van")
In Chrome on desktop the user can now enter a number. Also when I use Chrome device debugging tools and set it to iPhoneX, Galaxy S5, Galaxy Fold rendering etcetera it works just fine.
But when I load my live site on my Galaxy S10 in the Chrome browser, the moment the user clicks the input element to enter a number, the rest of the filter popup menu is hidden, and it only shows part of the range specification popup. Scrolling of the page is completely disabled. I'm thinking that certain events are handled differently, but I can't figure out which ones and why.
- I tried monitoring events using
monitorEvents(window,"click");, but no click events show - Logged events via Performance tab, but could not find the culprit
See the image here:
I have no idea why anymore and I can't reproduce it in Chrome desktop browser to actually debug it.
from Input element click on mobile device browser behaves differently than in Chrome device rendering
No comments:
Post a Comment