1

I am having a weird issue with Chrome on Android, where in portrait mode the keyboard on input focus forces resize event, which is then picked up by media query styles, the whole layout breaks and then... because on the media query the input field itself is not visible - Chrome decides to blur the input field, and the whole thing reverses - resulting in brief keyboard flick, and then repaint.

The layout is quite simple:

<div class="main">
  <div class="one">
    Top Panel
  </div>
  <div class="two">
    <input type='text' />
    Bottom Panel
  </div>
</div>

You can see the problem I am having in action here

Interestingly, it doesn't cause any problems on iOS in both Safari and Chrome, but it only seems to be affecting Android/Chrome combination.

Also, 'hiding of the input in landscape mode' is the desired requirement, so I'm looking for pointers how to tell Chrome not to 'know better' :)

For clarity what I want to achieve:

  • Orientation change to landscape hides input field
  • Chrome portrait mode doesn't trigger layout change and behaves in the same way as safari/ios does

I could use different positioning, combining it with flex, extending media query to be more specific, but I've tried all those and no luck so far, as long as the desired functionality remains unchanged I'm flexible.

Also, couldn't find an answer to this, but can I maybe ideally foce the keyboard to appear before the whole layout so the layout remains unchanged altogether?

Thanks in advance, G.

3
  • possible duplicate to stackoverflow.com/questions/32963400/…
    – Jules
    Nov 18, 2019 at 15:40
  • It did indeed, solved one of my problems, for some reason this answer dodged my extensive searching. Thanks for pointing it out.
    – Greg
    Nov 19, 2019 at 10:08
  • 1
    Actually I wonder, if there is also a solution to prevent from squashing the portrait viewport - since landscape is no longer triggered. I'm hoping for the keyboard to show up above the page or worst case scenario, push the whole page above, for the time being of keyboard being showed up. With all the push towards PWA's I'm slightly puzzled, why it's so tricky behaviour to implement :)
    – Greg
    Nov 19, 2019 at 10:28

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.