3

My mobile website has a fixed scrollable (overflow-y:auto) element that contains input tags. On iPhone and iPad, touching and moving on the input tags block the element from scrolling but touching and moving on labels (or anything else) do not. This issue does not occur on Android.

The input tags used to be part of a table before I switched to divs for layout and the scrolling worked then for iOS and Android. Is there a reason why scrolling is blocked when the input tags are not in tables? I really prefer not having to go back to tables for layout.

I also tried -webkit-overflow-scrolling: touch and it fixed the issue for iPhone but prevents scrolling completely on iPad on top of allowing users to scroll horizontally which I don't want.

UPDATE: If the soft keyboard is active everything works as intended. Only when the keyboard is not active when I get the issue.

Jasoneer
  • 2,078
  • 2
  • 15
  • 20
  • Stupid question, but by "touching the input tags" you do mean giving focus to the controls on the resuting page, right? Not when editing? – Mr Lister Jan 15 '13 at 08:11
  • Yes I think... What I mean is that I should be able to scroll when I touch the input tags and move without bringing up the keyboard. – Jasoneer Jan 15 '13 at 08:15

1 Answers1

0

The problem could be the browser. Do you use safari or another browser? Maybe updating the browser or trying it on a different iOS device will work?

Felix
  • 39
  • 7