Bug 149889

Summary: Wrong viewport in iframes
Product: WebKit Reporter: Aleksandr Dobkin <dobkin>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: benjamin, fred.wang, simon.fraser, zalan
Priority: P2    
Version: Safari 9   
Hardware: iPhone / iPad   
OS: iOS 9.0   
See Also: https://bugs.webkit.org/show_bug.cgi?id=266235
Attachments:
Description Flags
testcase
none
testcase 2 none

Aleksandr Dobkin
Reported 2015-10-07 13:09:10 PDT
When a page is embedded in an iframe, the viewport expands to the size of the iframe, which causes some pages to render in Desktop mode instead of Mobile. For example, the following page always renders in 'MOBILE' mode on e.g. Mobile Safari on iPhones. <!DOCTYPE html> <head> <meta content="width=device-width" name="viewport"> <style> body::after { content: "DESKTOP" } @media (max-width:767px) { body::after { content: "MOBILE" } } </style> </head> <div style="width: 1000px; border: 1px solid blue;"> very wide element </div> See this in action at http://output.jsbin.com/tizisoxidu. However, when the same page is embedded in an iframe, it renders in 'DESKTOP' mode: <!DOCTYPE html> <head> <meta content="width=device-width" name="viewport"> </head> <iframe src="//output.jsbin.com/tizisoxidu"></iframe> See this at http://output.jsbin.com/qagelujucu.
Attachments
testcase (359 bytes, text/html)
2026-10-12 07:15 PDT, Frédéric Wang Nélar 		no flags
Details
testcase 2 (481 bytes, text/html)
2026-10-12 07:18 PDT, Frédéric Wang Nélar 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2015-10-07 19:59:04 PDT
> the viewport expands to the size of the iframe This is frame flattening, which we do by default on iOS. We also don't do anything with <meta name="viewport"> tags in iframes.
Aleksandr Dobkin
Comment 2 2015-10-08 15:23:37 PDT
Note that in the top-level/parent frame, the viewport width never changes. So even if the size of the content, including interior iframes, becomes very large, the viewport remains at e.g. 320px and mobile rendering is maintained. However, once the content is put into an iframe, it ends up rendering much differently depending on the CSS rules that are used. One idea to fix this while keeping flattening would be make the CSS viewport size in frames to equal the nominal size of the frame. For example, if the iframe width is specified to be '100px', '100vw', or '100%', the viewport would be fixed to the corresponding pixel sizes, at least for the purpose of CSS media queries. This is pretty difficult to work around currently. I'm not aware of any way to to disable flattening for a particular frame. The only reasonable workaround I'm aware of is either 1) to create scrolling element and put the extra-wide content inside it, but that requires changing the DOM of the iframe, or 2) disable horizontal scrolling, but this really not ideal.
Frédéric Wang Nélar
Comment 3 2026-10-12 07:15:55 PDT
Created attachment 481765 [details] testcase
Frédéric Wang Nélar
Comment 4 2026-10-12 07:18:15 PDT
Created attachment 481766 [details] testcase 2
Frédéric Wang Nélar
Comment 5 2026-10-12 07:20:38 PDT
both testcase and testcase 2 renders as "MOBILE" on ios simulator. I think frame flattening has been removed after bug 195622 / bug 242883. So closing this bug but feel free to reopen if that's incorrect.
Note You need to log in before you can comment on or make changes to this bug.