139694 2014-12-16 12:29:52 -0800 ContentEditable=True inside of an Iframe jumps to the top of the parent window. 2019-01-07 22:50:38 -0800 1 1 1 Unclassified WebKit HTML Editing 528+ (Nightly build) iPhone / iPad iOS 8.1 NEW https://bugs.webkit.org/show_bug.cgi?id=140018 InRadar P2 Major --- 1 michael.h.snyder webkit-unassigned cory enrica jacekbogd m.lewandowski simon.fraser s webkit-bug-importer wenson_hsieh oldest_to_newest 1056050 0 michael.h.snyder 2014-12-16 12:29:52 -0800 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. 1287578 1 m.lewandowski 2017-03-14 05:52:38 -0700 Same thing affects CKEditor, which makes it hard to use on iOS. 1315138 2 simon.fraser 2017-06-02 11:43:11 -0700 Does this reproduce in iOS 10.3? 1315194 3 cory 2017-06-02 13:42:07 -0700 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. 1315197 4 simon.fraser 2017-06-02 13:47:02 -0700 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. 1315315 5 311892 simon.fraser 2017-06-02 17:52:25 -0700 Created attachment 311892 Testcase With this test case, I cannot reproduce the issue on an iPad running 10.3. 1448721 6 jacekbogd 2018-08-08 03:40:15 -0700 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. 1448726 7 jacekbogd 2018-08-08 03:49:24 -0700 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. 1449011 8 webkit-bug-importer 2018-08-09 09:22:42 -0700 <rdar://problem/43097167> 311892 2017-06-02 17:52:25 -0700 2017-06-02 17:52:25 -0700 Testcase two-iframes.html text/html 353 simon.fraser PCFET0NUWVBFIGh0bWw+Cgo8aHRtbD4KPGhlYWQ+CiAgICA8c3R5bGU+CiAgICAgICAgaWZyYW1l IHsKICAgICAgICAgICAgaGVpZ2h0OiAxMDAwcHg7CiAgICAgICAgICAgIGRpc3BsYXk6IGJsb2Nr OwogICAgICAgICAgICBtYXJnaW46IDEwcHg7CiAgICAgICAgfQogICAgPC9zdHlsZT4KPC9oZWFk Pgo8Ym9keT4KPGlmcmFtZT4KPC9pZnJhbWU+CjxpZnJhbWUgc3JjZG9jPSI8cD5FZGl0YWJsZTo8 L3A+PGRpdiBjb250ZW50ZWRpdGFibGU9J3RydWUnIHN0eWxlPSd3aWR0aDogMTAwJTsgaGVpZ2h0 OiA1MDBweDsgYm9yZGVyOiAxcHggc29saWQgZ3JheSc+PC9kaXY+Ij4KPC9pZnJhbWU+CjwvYm9k eT4KPC9odG1sPgo=