title: iOS/iPhone disables auto hide address bar when overflow hidden?
body: <p>I've been running into problems with the iPhone using the <strong>overflow:hidden</strong> property. Whenever I use this property, it seems that the auto hide/collapse function for the address bar on the iPhone when scrolling (down) does not work anymore (Safari iOS).</p>
  
  <p>I have made a test-site to strip the necessary functions to a minimum so that I can test where the error is. However, it seems that iPhone and the overflow property do not work well together...</p>
  
  <p>Here's the test-site: <a href="http://www.mitchellvanbeurden.eu/test" rel="noreferrer">link</a></p>
  
  <p>I'm trying to get a horizontal overflow hidden for anything beyond the width of the screen and have the ability to scroll vertically. Therefore the body and html get a <strong>width</strong> and <strong>height</strong> of <strong>100%</strong> and the <strong>overflow-x:hidden</strong> property. This works great for what I wanted to achieve. However, it seems that the auto hide/collapse function of the address bar in iOS Safari on iPhone no longer works.</p>
  
  <p>If I remove the <strong>overflow</strong> properties from the <strong>html, body {}</strong> and put it only on the <strong>body</strong>, then this function works again, but the horizontal overflow is not clipped...</p>
  
  <p>I have searched numerous places an read lots of articles, but did not find a fitting solution.</p>
  
  <p>Suggested and tried solutions included adding the '<strong>position: relative</strong>' property to the <strong>body</strong>, using javascript to 'force a body scroll' (also on the test site), defining a general <strong>overflow:hidden</strong> but including <strong>overflow-y:auto</strong>, ... .</p>
  
  <p>I encountered this problem on a site I'm developing where I want to use <strong>overflow:hidden</strong> on the body/html and use <strong>overflow-y:scroll</strong> on a div inside. It's sort of a one-pager website where other content 'slides in' horizontally on navigation (by adjusting the <strong>left</strong> property of the wrapper) - therefore the need for an <strong>overflow-x:hidden</strong>.</p>
  
  <p>Is it not possible to use the <strong>overflow(-x):hidden</strong> property and maintain the address bar hide/collapse function on iPhone or am I missing something here?</p>