0

Whenever I give focus to an input field which is within a container that is fixed (in this case, a toolbar), an ipad will remove the fixed position. Now I can scroll above and below that toolbar, which is undesirable.

https://www.hypotheker.nl/#/afspraak-maken

I have tried many things like setting the body to a fixed position, but that will scroll the page to the top.

Does anybody have the golden solution to fix this issue?

ErasmoOliveira
  • 1,416
  • 2
  • 20
  • 40
Wouter Willems
  • 432
  • 2
  • 6
  • 19
  • If you dont want the page to move you can use something like `$(document).bind('touchmove', false);` – Ruddy Feb 21 '14 at 15:42

1 Answers1

0

Here's the solution to your problem: https://stackoverflow.com/a/20205857/3523645

Basically, it's a known bug in touch-device browsers and the solution is to detect focus event on target input fields and at that moment change the styling of fixed elements to position: absolute.

The mentioned solution uses modernizr's touch property, but keep in mind the following (taken from modernizr's documentation):

The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device.

Community
  • 1
  • 1
timetowonder
  • 5,121
  • 5
  • 34
  • 48