Bug 172926 - Viewport units change when contentEditable is in an iframe
Summary: Viewport units change when contentEditable is in an iframe
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: iPhone / iPad iOS 10
: P2 Normal
Assignee: Nobody
URL: http://csnl.net/_stuff/ios-iframe.html
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-06-05 10:50 PDT by Cory LaViska
Modified: 2017-06-06 11:42 PDT (History)
3 users (show)

See Also:


Attachments
Test case (2.35 KB, application/zip)
2017-06-05 10:50 PDT, Cory LaViska
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Cory LaViska 2017-06-05 10:50:22 PDT
Created attachment 312015 [details]
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.
Comment 1 Simon Fraser (smfr) 2017-06-05 22:21:10 PDT
Seems like an unfortunate side-effect of frame flattening.
Comment 2 Radar WebKit Bug Importer 2017-06-05 22:22:46 PDT
<rdar://problem/32581387>
Comment 3 Cory LaViska 2017-06-06 11:42:48 PDT
(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.