<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_NEW "
title="NEW - Wrong viewport in iframes"
href="https://bugs.webkit.org/show_bug.cgi?id=149889#c2">Comment # 2</a>
on <a class="bz_bug_link
bz_status_NEW "
title="NEW - Wrong viewport in iframes"
href="https://bugs.webkit.org/show_bug.cgi?id=149889">bug 149889</a>
from <span class="vcard"><a class="email" href="mailto:dobkin@google.com" title="Aleksandr Dobkin <dobkin@google.com>"> <span class="fn">Aleksandr Dobkin</span></a>
</span></b>
<pre>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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>