[PR#82][iOS] On iPad touch listeners prevents CKEditor selection

[Matthew Beck]

On an iPad using a Safari or Chrome browser, selection does not work when a jQuery $("body").on("touchstart") event listener is used.

To reproduce the issue CKEditor must use iframe for wysiwygarea and CKEditor container must have some offset (​​https://bugs.webkit.org/show_bug.cgi?id=128924) from the document node.

Any touch listener on any ckeditor iframe parent will cause this issue on iOS also floating panels become not clickable, because focus leaves iframes before click handling happens (blur happens before click and panel hides)

[Arty Gus]

To reproduce the issue CKEditor must use iframe for wysiwygarea and CKEditor container must have some offset (​https://bugs.webkit.org/show_bug.cgi?id=128924) from the document node.

Any touch listener on any ckeditor iframe parent will cause this issue on iOS also floating panels become not clickable, because focus leaves iframes before click handling happens (blur happens before click and panel hides)

[Piotrek Koszuliński]

There was a pull request submitted: ​https://github.com/ckeditor/ckeditor-dev/pull/82

We'll review it for the 4.4.1.

[Piotr Jasiun]

Code looks good and seems to work fine. I tested it and in fact it fixed the bug. On Chrome@Android this issue does not exist. I picked your commit and added one with code style fixes.

Changes in ​t/10714.

[Piotrek Koszuliński]

Before we accept this patch, I would like to understand what it does. It fixes some unclear or buggy browser behaviour, so perhaps to understand it it's enough if you explain what's the issue.

[Toni Rudolf]

the issue is that if you have anywhere in your javascript a listener on a touchstart event ($("body").on("touchstart")) the ckeditor does not work anymore.. you can't move the cursor with your finger in ios.. it's just stuck at the first position..

[Piotrek Koszuliński]

That's a "trigger". I'm really curious what's the reason of the issue - in other words - why is the caret stuck if you have this listener. Because this a mysterious thing.

AFAIK, that isn't the only issue fixed by this patch. For example, quoting the pull request:

fix for selection troubles and undesired floating panel hides, tested with iOS 6 and 7

[Piotrek Koszuliński]

PS. comment:9 was mainly to @pjasiun. But if anyone knows the reasons, I will gladly hear them.

[Piotr Jasiun]

After a while of investigation I found out that:

1. the bug exists also if I use native JS instead of jQ:

   document.body.addEventListener("touchstart", function( env ) {} );
   

2. the bug does not exist in inline editor,
3. everything seems to be fine if there is no buttons in the toolbar,
4. debugging on iPad is awful.

I will continue debugging on Monday.

[Arty Gus]

@pjasiun, sorry i've been away on vacations

1. yes, the problem exists only with iframes (CKEditor uses iframe by default)
2. yup
3. iframe must have an offset from the document body (or html element, i'm not sure) - i filled the bug to webkit dev team - ​https://bugs.webkit.org/show_bug.cgi?id=128924
4. you can use ios-webkit-debug proxy tool if you're on linux, or port for win32 ​https://github.com/artygus/ios-webkit-debug-proxy-win32

and about the floating panel hides, e.g. font size - whenever you touch anything in the iframe the blur happens first and triggers the panel to hide, i.e no scrolling occurs (only if we have (1), i.e. any of iframe parents has a touch event bound)

[Piotrek Koszuliński]

Thanks Arty! I've made a final review and some changes (see ​git:001bbb4f) - i.e. to make no changes on other than iOS envs. There are numbers of ugly issues regarding focus in panels already fixed by CKEditor and I don't want to touch that.

As for the rest - great work on a really nasty bug.

I merged the branch to master with ​git:823d821.

[Arty Gus]

floating panel part relates to blur issues ​https://bugs.webkit.org/show_bug.cgi?id=133044