Opened 6 years ago

Closed 5 years ago

#10770 closed Bug (fixed)

[iOS] Must click exactly on first line to insert cursor on iPad

Reported by: zkloepping Owned by:
Priority: Normal Milestone:
Component: General Version: 4.2
Keywords: iOS Cc:

Description

You can see this issue by navigating to http://ckeditor.com/demo#skin in safari on an iPad

In a desktop browser, you can click anywhere in the white area of the CK input box and it will make it 'focused' and show the blinking text input curser.

On iPad you must click very specifically to get the cursor to show up. You must touch your finger to where the first line of text would be if there was one there, otherwise you just get a sort of 'flash' effect in the input box and no cursor.

Change History (8)

comment:1 Changed 6 years ago by Jakub Ś

Keywords: iOS added

comment:2 Changed 6 years ago by mikey

Yes, that's on Android the same. If I click in the white area => no focus. If I click exactly on the left top corner it works.

comment:3 Changed 5 years ago by Jakub Ś

Summary: Must click exactly on first line to insert cursor on iPad[iOS] Must click exactly on first line to insert cursor on iPad

comment:4 Changed 5 years ago by Danil

I thinks this is related: On desktop browsers there is the same issue with right click. On right click below first line you get neigther ckeditor menu nor native one.

Adding contenteditable attribute to <html> adds native menu. This potentially can fix the reported cursor issue.

comment:5 Changed 5 years ago by Al Jachimiak

I think I have the reason for this.

TL;DR == The height of the editable body of an empty editor is only 20px. It probably should match the height of the editable area.

Long Version: The div.cke_[n]_contents gets a height from the config. The iframe inside this div gets a correctly set style="width:100%; height:100%; .

However, the #document > body inside the iframe is only as large as the line height (20px high with a padding of 20px all-around).

On the iPad, the the #document > body will only gain focus (thus revealing your keyboard) *the first time* by tapping inside this 20-60px area. Note, this is only for the first time. Subsequent taps will gain focus by tapping anywhere in the div.cke_[n]_contents.

Suggested Fix: whatever height (heightVar) is applied to div.cke_[n]_contents should also be applied to the #document > body as :

"style='height:" + heightVar +"'"

when the editor is initialized.

A more flexible solution may need to use min-height instead of height. This will allow for the text to be larger than the original area.

I'll do my best to get a pull-request in on this.

-Al

comment:6 Changed 5 years ago by Al Jachimiak

Last edited 5 years ago by Jakub Ś (previous) (diff)

comment:7 Changed 5 years ago by Piotr Jasiun

I tested it on Safari at iOS 7.1.2 (iPad) and Chrome 37 at Android 4.4.2 and the bug seems to be fixed. It seems to be fixed on the browser side, because I can not reproduce it with any CKEditor version (tested 4.4.4, 4.2.0 and 3.6.6).

comment:8 Changed 5 years ago by Jakub Ś

Resolution: fixed
Status: newclosed

Thanks for checking @pjasiun.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy