Device: iPhone 6
The demo:
- parent document: http://jsbin.com/panoke/edit?html,css,output
- iframe document: http://jsbin.com/somuhix/edit?html,css,js,output
To reproduce:
1. Open http://output.jsbin.com/panoke/quiet in the portrait mode
2. Switch to landscape mode. Observe the reported resize event with the viewport width 667 (window.innerWidth = 667)
3. Switch back to portrait mode. Observe the reported resize event with the viewport width 667 (window.innerWidth = 667) again, which is incorrect.
Expected:
When rotating back to portrait mode, the expected viewport width should be 375. The child iframe document sets the width on one of its elements based on the viewport width. This, however, should only affect scrollWidth and not viewport width.
Workaround:
Instead of `iframe {width: 100%}` CSS, use `iframe {min-width: 100%}` (or even `iframe {min-width: 100%; max-width: 100%}`) - that fixes the problem. It appears that `width: 100%` explicitly triggers some different mode on the iframe.