3

I can't seem to use overflow: hidden trick on the body of my website in order to lock the background content when a modal is open.

I'm applying the current styles onto the body:

    $('body').css({'overflow':'auto', 'position':'static'});

And they are being successfully applied, it works fine in Android, the background content locks, however in iOS devices, this doesn't work and the content background content is still scrollable. Any idea what would cause this?

This is the meta viewport tag I am using:

<meta name="viewport" content="width=device-width, maximum-scale=1">
Neil
  • 2,509
  • 7
  • 32
  • 47
  • Not sure what is that `overflow:hidden` hack to fix the background. But if you don't want it to be scrollable, why don't you use `background-attachment:fixed`? – Oriol Aug 15 '13 at 16:25
  • Sorry when I refer to background I mean the content in the background – Neil Aug 15 '13 at 16:26

1 Answers1

7

iOS6 Webview requires overflow hidden on both the html and body element to work correctly. If someone wants to add it to the webkit bug tracker I'd be much obliged :).

Either this or the question here should be marked as duplicate.

Community
  • 1
  • 1
RobW
  • 10,184
  • 4
  • 41
  • 40
  • 1
    Explanation for the downvote would be appreciated so I can fix the answer. – RobW Oct 09 '14 at 17:10
  • Yep. You should add `position: relative` to the body, too, to make it work for positioned content. For the full low-down, see http://stackoverflow.com/a/28673415/508355 – hashchange Feb 23 '15 at 12:09