Search code examples
javascriptandroidhtmlcsssamsung-galaxy

Input element click on mobile device browser behaves differently than in Chrome device rendering

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).

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

I have no idea why anymore and I can't reproduce it in Chrome desktop browser to actually debug it.

UPDATE 1

The issue was the mobile virtual keyboard that trigger the resize method. Fixed it by checking for width change:

var initialWidth = $(window).width(), initialHeight = $(window).height();

window.addEventListener('resize', function () {

    if ($(window).width() != initialWidth) {//the width was changed
    
    }

})
Solution

  • While debugging, I found that when the input is in focus and the keyboard pops up, that instant .mobile class is removed from section.filters. You'll have to see for any event handler that removes the .mobile class on any event. Secondly, after the bug was encountered I again added the removed .mobile class manually to section.filters and the modal was back in place working properly. After clicking "Specificeer" it gives rise to another bug, where the main page becomes unscrollable. Also at the same instant there is another error TypeError which could possibly be the cause of the other bug...