Opened 11 years ago
Closed 10 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 11 years ago by
| Keywords: | iOS added |
|---|
comment:2 Changed 11 years ago by
comment:3 Changed 10 years ago by
| 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 10 years ago by
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 10 years ago by
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 10 years ago by
Looks like this was handled in Issue 10714.
And the bug was fixed in this commit: https://github.com/ckeditor/ckeditor-dev/commit/2e2785d37df11a1bb346a9a77a525a33660a2485#diff-808a5dd52f7e18f8c6c7822c8f713958R266
comment:7 Changed 10 years ago by
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 10 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
Thanks for checking @pjasiun.
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.