Responsive amp-ad iframe not correct width on IOS after orientation change.

[omegdadi]

Responsive AMP ads do not size correctly on IOS (works fine in Android) when performing orientation changes. On load of the page, the iFrame is set to width:100% which allows it to grow properly when going from portrait to landscape, but when returning to portrait, the iFrame isn't resized.

How do we reproduce the issue?

https://services-staging.s3.amazonaws.com/AndyHills/AMP_HTML/amp_demo.html#development=1

1. Load the page in portrait mode.
2. Rotate to landscape, see that ad scales to fit the iFrame (which is 100% sized to match width of device)
3. Rotate to portrait, see that ad is now clipped because it is still scaled to fit the iFrame (which is still 100%, but still sized to match landscape width of device. See calculated dimensions.)
4. Toggle 100% width on iFrame off and back on again in the dev tools to see that it re-renders correctly.

What browsers are affected?

IOS Only, Mobile Safari/Chrome. Seen in IOS 9.2.1 (but not exclusively)

Which AMP version is affected?

This is the first time I encountered this issue in AMP, but I'm unable to determine when it started happening. This seems to be VERY related to several IOS viewport width + orientation issues I've seen in the past. So, I don't think the bug is in AMP code, but rather that AMP needs to work around this bug in Safari. Again, works fine in Android :-)

AMP version: 1456954860788

Suggested workaround (Note: Applying the CSS rule suggestion in this SO using Safari dev tools seemed to alleviate the issue):
http://stackoverflow.com/questions/20123960/how-to-get-iframe-width-100-in-iphone-portrait-view

[cramforce]

Thanks for the thorough report!

Assigning to @dvoytenko mostly to check whether he has an immediate idea.

[omegdadi]

Thanks @cramforce. As I mentioned, this is a known issue in Safari on Mobile. The suggestion in the Stack Overflow seems like a pretty solid workaround.

[dvoytenko]

Thanks @omegdadi. I filed the bug against WebKit: https://bugs.webkit.org/show_bug.cgi?id=155198

I will apply the fix you suggest. It looks like width: 100% explicitly forces this different mode in iOS where it sizes the iframe's window by document's scrollWidth/scrollHeight.

[omegdadi]

@dvoytenko I've updated the PR with the changes and added a comment in the CSS referencing the WebKit issue.

[dvoytenko]

This should be fixed now. Looks like it's going into "1457636119213" release with goes into canary later today.