How to fix iOS Viewport Bug(s)?

Question

Imagine the following setup:

<meta name="viewport" content="user-scalable=yes, width=640" />

Default CSS:

body { width: 100%; }

CSS change on some element (let's call it button-X) click:

body { 
    margin: 0 0 0 -webkit-calc(100% - 100px);
    min-width: 640px; 
    overflow-x: hidden; 
}

What does this do in desktop browser?

It shifts entire body almost 100% to the right. Horizontal scrollbar doesn't appear. You only see left part (100px) of the body positioned to the very right of your screen.

What does this do in iPhone 4S iOS 6.0.1?

There are two behaviors actually:

1. INCORRECT: If you just run Safari and click button-X it will start displaying your website at like 1200px instead of 640px.... shifted body will make entire viewport have 630px of blank space + body width = ~1200px. Even if body has position: absolute; or position: fixed; which in theory should allow positioning elements outside viewport but it doesn't. iOS makes viewport so large that your elements that are supposed to be off the screen are on the screen.
2. CORRECT: I wouldn't ask this question because maybe that's how it works and it can't be changed BUT there is fix for that so I assume it's a bug of iOS. If I run Safari and I tap it with 2 fingers and move them together (like to zoom out) and then click button-X it works perfectly. This action of tapping with two fingers doesn't change anything to viewport. Since viewport is set to 640px it will remain 640px after releasing fingers so literary nothing changes... but it starts working perfectly fine after this simple action.

The question is - how to perform this action (2) programmatically? I've tried:

1. jQuery(window).trigger('resize');
2. -webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;
3. How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
4. Interesting: it will make viewport ~1200px even if you set user-scalable: no

This didn't change anything. Basically I want absolutely positioned elements (or with overflow: hidden;) to be off the viewport like in desktop browsers.

Answer 1

Have you tried initial-scale=1, maximum-scale=1, user-scalable=no? Also, I think you are trying to fix it backwards. What is exactly the thing you want to do? Not the behaviour of the viewport or DOM elements, but the result website/webapp.

Anyway - in general, viewport is body. It's weird to make the body wider than the viewport and expect the body to clip itself. Try setting the body at a fixed width (not minimum, because this way it can get as much wide as it wants), and putting a div container inside the body, and apply your margin CSS change to the div, not the body - body should have the width set and overflow-x:hidden.