172926 2017-06-05 10:50:22 -0700 Viewport units change when contentEditable is in an iframe 2017-06-06 11:42:48 -0700 1 1 1 Unclassified WebKit CSS Safari 10 iPhone / iPad iOS 10 NEW http://csnl.net/_stuff/ios-iframe.html InRadar P2 Normal --- 1 cory webkit-unassigned simon.fraser webkit-bug-importer zalan oldest_to_newest 1315719 0 312015 cory 2017-06-05 10:50:22 -0700 Created attachment 312015 Test case This issue appears to affect any element using viewport units on an iOS device. When a contentEditable element is inside an iframe and the content changes, causing the iframe to grow (e.g. hitting enter or pasting content), the viewport units also change. This causes all elements using viewport units to expand or contract accordingly, which makes it extremely difficult to perform simple editing tasks. Test case: http://csnl.net/_stuff/ios-iframe.html Video demonstrating the bug on iPad: http://csnl.net/_stuff/ios-ce-iframe-demo.mp4 This affects all contentEditable="true" elements rendered inside an iframe on iOS, including those controlled by TinyMCE, CKEditor, etc. While this might seem like an edge case, it's not uncommon to use an iframe for inline editing applications (e.g. https://www.postleaf.org) to scope HTML/CSS/JS separately from an admin panel. Attached are the test files I linked to above. 1315902 1 simon.fraser 2017-06-05 22:21:10 -0700 Seems like an unfortunate side-effect of frame flattening. 1315903 2 webkit-bug-importer 2017-06-05 22:22:46 -0700 <rdar://problem/32581387> 1316138 3 cory 2017-06-06 11:42:48 -0700 (In reply to Simon Fraser (smfr) from comment #1) > Seems like an unfortunate side-effect of frame flattening. I was thinking that might be the case. I can't seem to find the purpose of iframe flattening, but as I understand, there's no way to override that behavior. Out of curiosity, your insight into that would be awesome. Regarding the issue, is it possible to use the parent window's viewport width/height inside the iframe? It would make more sense, IMO, since the viewport isn't expected to change unless orientation changes. Currently, even iframes that don't change in size display images and such too large when there's a lot of content. 312015 2017-06-05 10:50:22 -0700 2017-06-05 10:50:22 -0700 Test case ios-iframe-viewport-bug.zip application/zip 2402 cory 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 AAC9BwAAAAA=