iOS/iPhone disables auto hide address bar when overflow hidden?

I've been running into problems with the iPhone using the overflow:hidden 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).

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...

Here's the test-site: link

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 width and height of 100% and the overflow-x:hidden 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.

If I remove the overflow properties from the html, body {} and put it only on the body, then this function works again, but the horizontal overflow is not clipped...

I have searched numerous places an read lots of articles, but did not find a fitting solution.

Suggested and tried solutions included adding the 'position: relative' property to the body, using javascript to 'force a body scroll' (also on the test site), defining a general overflow:hidden but including overflow-y:auto, ... .

I encountered this problem on a site I'm developing where I want to use overflow:hidden on the body/html and use overflow-y:scroll on a div inside. It's sort of a one-pager website where other content 'slides in' horizontally on navigation (by adjusting the left property of the wrapper) - therefore the need for an overflow-x:hidden.

Is it not possible to use the overflow(-x):hidden property and maintain the address bar hide/collapse function on iPhone or am I missing something here?