Bug 155198 – IFrame is resized incorrectly on orientation change

• Component: Frames
• Status: RESOLVED FIXED

[Dima Voytenko]

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.

[Radar WebKit Bug Importer]

<rdar://problem/28660040>

[Frédéric Wang (:fredw)]

Created attachment 300208 [details]
testcase

[Frédéric Wang (:fredw)]

Created attachment 300209 [details]
testcase

[Frédéric Wang (:fredw)]

Testing with the simulator, the bug seems to be fixed on trunk (I can reproduce it with iOS 10.0 though).

[Frédéric Wang (:fredw)]

Created attachment 334041 [details]
Patch

[Antonio Gomes]

Comment on attachment 334041 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=334041&action=review

r+ w/ nits

> LayoutTests/fast/events/ios/rotation/resize-iframe-after-orientation-change.html:26
> +                    uiController.simulateRotation('${orientation}', function() {

let use either single or double quote throughout the test.

> LayoutTests/fast/events/ios/rotation/resize-iframe-after-orientation-change.html:43
> +          await rotateDevice('portrait');
> +          var output = document.getElementById("output");
> +          var outer = document.getElementById("outer");
> +          shouldBe('document.getElementById("frame").scrollWidth', 'outer.scrollWidth');
> +          shouldBe('document.getElementById("frame").contentDocument.getElementById("inner").scrollWidth', 'outer.scrollWidth');

ditto, unless where the difference makes sense.

[Frédéric Wang (:fredw)]

Committed r228692: <https://trac.webkit.org/changeset/228692>