Bug 155198

Summary: IFrame is resized incorrectly on orientation change
Product: WebKit Reporter: Dima Voytenko <dvoytenko>
Component: FramesAssignee: Frédéric Wang (:fredw) <fred.wang>
Severity: Normal CC: fred.wang, simon.fraser, tonikitoo, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 9   
Hardware: iPhone / iPad   
OS: iOS 9.3   
Description Flags
Patch tonikitoo: review+

Description Dima Voytenko 2016-03-08 15:00:12 PST
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.


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.


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.
Comment 1 Radar WebKit Bug Importer 2016-10-06 15:16:27 PDT
Comment 2 Frédéric Wang (:fredw) 2017-01-31 06:17:15 PST
Created attachment 300208 [details]
Comment 3 Frédéric Wang (:fredw) 2017-01-31 06:17:42 PST
Created attachment 300209 [details]
Comment 4 Frédéric Wang (:fredw) 2018-02-12 07:11:34 PST
Testing with the simulator, the bug seems to be fixed on trunk (I can reproduce it with iOS 10.0 though).
Comment 5 Frédéric Wang (:fredw) 2018-02-16 07:48:24 PST
Created attachment 334041 [details]
Comment 6 Antonio Gomes 2018-02-19 08:15:35 PST
Comment on attachment 334041 [details]

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.
Comment 7 Frédéric Wang (:fredw) 2018-02-19 08:57:47 PST
Committed r228692: <https://trac.webkit.org/changeset/228692>