Bug 155198 - IFrame is resized incorrectly on orientation change
Summary: IFrame is resized incorrectly on orientation change
Alias: None
Product: WebKit
Classification: Unclassified
Component: Frames (show other bugs)
Version: Safari 9
Hardware: iPhone / iPad iOS 9.3
: P2 Normal
Assignee: Frédéric Wang (:fredw)
Keywords: InRadar
Depends on:
Reported: 2016-03-08 15:00 PST by Dima Voytenko
Modified: 2018-02-19 08:57 PST (History)
5 users (show)

See Also:

testcase (1.59 KB, text/html)
2017-01-31 06:17 PST, Frédéric Wang (:fredw)
no flags Details
testcase (1.80 KB, text/html)
2017-01-31 06:17 PST, Frédéric Wang (:fredw)
no flags Details
Patch (5.74 KB, patch)
2018-02-16 07:48 PST, Frédéric Wang (:fredw)
tonikitoo: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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>