149889 2015-10-07 13:09:10 -0700 Wrong viewport in iframes 2026-10-12 07:20:38 -0700 1 1 1 Unclassified WebKit DOM Safari 9 iPhone / iPad iOS 9.0 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=266235 P2 Normal --- 1 dobkin webkit-unassigned benjamin fred.wang simon.fraser zalan oldest_to_newest 1131380 0 dobkin 2015-10-07 13:09:10 -0700 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. 1131518 1 simon.fraser 2015-10-07 19:59:04 -0700 > 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. 1131750 2 dobkin 2015-10-08 15:23:37 -0700 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. 2262514 3 481765 fred.wang 2026-10-12 07:15:55 -0700 Created attachment 481765 testcase 2262516 4 481766 fred.wang 2026-10-12 07:18:15 -0700 Created attachment 481766 testcase 2 2262517 5 fred.wang 2026-10-12 07:20:38 -0700 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. 481765 2026-10-12 07:15:55 -0700 2026-10-12 07:15:55 -0700 testcase bug-149889.html text/html 359 fred.wang IDwhRE9DVFlQRSBodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY29udGVudD0id2lkdGg9ZGV2aWNl LXdpZHRoIiBuYW1lPSJ2aWV3cG9ydCI+CiAgICA8c3R5bGU+CiAgICAgIGJvZHk6OmFmdGVyIHsK ICAgICAgICBjb250ZW50OiAiREVTS1RPUCIKICAgICAgfQogICAgICBAbWVkaWEgKG1heC13aWR0 aDo3NjdweCkgewogICAgICAgIGJvZHk6OmFmdGVyIHsKICAgICAgICAgIGNvbnRlbnQ6ICJNT0JJ TEUiCiAgICAgICAgfQogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8ZGl2IHN0eWxl PSJ3aWR0aDogMTAwMHB4OyBib3JkZXI6IDFweCBzb2xpZCBibHVlOyI+CiAgICB2ZXJ5IHdpZGUg ZWxlbWVudAogIDwvZGl2Pgo= 481766 2026-10-12 07:18:15 -0700 2026-10-12 07:18:15 -0700 testcase 2 bug-149889.html text/html 481 fred.wang ICA8IURPQ1RZUEUgaHRtbD4KICA8aGVhZD4KICAgIDxtZXRhIGNvbnRlbnQ9IndpZHRoPWRldmlj ZS13aWR0aCIgbmFtZT0idmlld3BvcnQiPgogIDwvaGVhZD4KICA8aWZyYW1lIHNyY2RvYz0nPCFE T0NUWVBFIGh0bWw+CiAgPGhlYWQ+CiAgICA8bWV0YSBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lk dGgiIG5hbWU9InZpZXdwb3J0Ij4KICAgIDxzdHlsZT4KICAgICAgYm9keTo6YWZ0ZXIgewogICAg ICAgIGNvbnRlbnQ6ICJERVNLVE9QIgogICAgICB9CiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOjc2 N3B4KSB7CiAgICAgICAgYm9keTo6YWZ0ZXIgewogICAgICAgICAgY29udGVudDogIk1PQklMRSIK ICAgICAgICB9CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxkaXYgc3R5bGU9Indp ZHRoOiAxMDAwcHg7IGJvcmRlcjogMXB4IHNvbGlkIGJsdWU7Ij4KICAgIHZlcnkgd2lkZSBlbGVt ZW50CiAgPC9kaXY+Cic+PC9pZnJhbWU+Cg==