Bug 172926 – Viewport units change when contentEditable is in an iframe

• Status: NEW
• Component: CSS

[Cory LaViska]

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.

[Simon Fraser (smfr)]

Seems like an unfortunate side-effect of frame flattening.

[Radar WebKit Bug Importer]

<rdar://problem/32581387>

[Cory LaViska]

(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.