iOS6 landscape to portrait breaks the layout

Question

I'm working on a web app that's responsive. I have set the viewport meta tag to:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

I have no problems with orientation anywhere but on iOS6 . On that particular iOS , when I change the orientation from landscape to portrait the content keeps the correct aspect ratio but partly disappears to the left, leaving a blank space to the right.

When I open the debugger for the iOS Simulator ( Safari > Develop > iPhone Simulator > URL ) and click at the html tag - which is not overflowed - the page snaps back to where it should have been.

Note that I'm relying on the viewport meta tag to get this done and not using any iOS proprietary orientation mode. It works fine on:

• iOS5.1.0 tested on iOS Simulator
• iOS7.0.0 tested on a real iPhone

We don't support iOS4 nor lower versions. Anyone experiencing the same?

Answer 1

I found that it was an input field that caused the page to break when changing orientation from landscape to portrait.

After even more digging, I found that the placeholder text was the problem's root cause. Taking the placeholder away would solve the problem. But since it was a problem exclusive to iOS6 , I had to find another solution... This question let me to the right direction.

All I had to do was to give the input field's parent element (in this case a form) overflow: hidden .