Bug 139694 - ContentEditable=True inside of an Iframe jumps to the top of the parent window.
Summary: ContentEditable=True inside of an Iframe jumps to the top of the parent window.
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: 528+ (Nightly build)
Hardware: iPhone / iPad iOS 8.1
: P2 Major
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2014-12-16 12:29 PST by Michael Snyder
Modified: 2019-01-07 22:50 PST (History)
8 users (show)

See Also:

Testcase (353 bytes, text/html)
2017-06-02 17:52 PDT, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Michael Snyder 2014-12-16 12:29:52 PST
Steps to reproduce (easiest)

1) Create html page with two iframes (800px tall each)
2) In the lower iframe add another iframe with a page consisting of <div contenteditable="true" style="width: 100%; height: 500px;"></div> inside the frame
3) Open the page on an ipad and start typing in the contenteditable field
4) The page will jump to the top of the parent screen randomly when hitting certain keys and especially the space bar.

TinyMCE will not work either.

I have reproduced in Latest Chrome and Safari IOS. It appears there is a problem calculating the focus scrollTop.
Comment 1 m.lewandowski 2017-03-14 05:52:38 PDT
Same thing affects CKEditor, which makes it hard to use on iOS.
Comment 2 Simon Fraser (smfr) 2017-06-02 11:43:11 PDT
Does this reproduce in iOS 10.3?
Comment 3 Cory LaViska 2017-06-02 13:42:07 PDT
I'm still seeing this behavior in the latest iOS. I actually discovered this while troubleshooting what I thought was a TinyMCE bug in Postleaf. It appears as though the frame's document.body.scrollTop value is always 0, regardless of whether or not the frame is scrolled.

Then I realized you can't set an explicit height on an iframe in iOS. They seem to expand to the full height of their content.

That said, I'm not sure if this is actually a Webkit bug or a side effect of iframe's on mobile Safari not accepting the height specified by CSS. It could be that TinyMCE, CKEditor, et al assume scrollTop will be a positive value when instead it stays at zero, and the libs are "fixing" the scroll position based on that value.
Comment 4 Simon Fraser (smfr) 2017-06-02 13:47:02 PDT
Thanks. It would be helpful to have a URL that points to a page that reproduces this for you, rather than me trying to create one from the instructions.
Comment 5 Simon Fraser (smfr) 2017-06-02 17:52:25 PDT
Created attachment 311892 [details]

With this test case, I cannot reproduce the issue on an iPad running 10.3.
Comment 6 Jacek Bogdański 2018-08-08 03:40:15 PDT
The issue also exists on iOS 11.4. You can reproduce test steps using this codepen: https://codepen.io/jacekbogdanski/pen/NMbdwz
Just scroll down and click "Type here" text.
Comment 7 Jacek Bogdański 2018-08-08 03:49:24 PDT
It also would be great to get some updates on the issue status thus it's pretty old and it's causing WYSIWYG editors based on iframes unusable.
Comment 8 Radar WebKit Bug Importer 2018-08-09 09:22:42 PDT