Bug 134596 - Click events offset in webkit-overflow-scrolling iframes
Summary: Click events offset in webkit-overflow-scrolling iframes
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: iPhone / iPad Other
: P2 Major
Assignee: Benjamin Poulain
URL: http://www.justise.com/prototype/scro...
Keywords:
Depends on:
Blocks:
 
Reported: 2014-07-03 09:37 PDT by Kris Gray
Modified: 2014-10-02 15:01 PDT (History)
4 users (show)

See Also:


Attachments
xCode Project to reproduce the issue (38.20 KB, application/zip)
2014-07-03 09:37 PDT, Kris Gray
no flags Details
Patch (2.43 KB, patch)
2014-10-01 21:02 PDT, Benjamin Poulain
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Kris Gray 2014-07-03 09:37:21 PDT
Created attachment 234347 [details]
xCode Project to reproduce the issue

Reproduced on iOS8 Beta 2. 
Version: 538.39 (Your form needs updating. :D )
navigator.userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/538.39 (KHTML, like Gecko) Mobile/12A4297e"

Salesforce embeds all its customer VisualForce pages in Salesforce1 this way, so not having selecting working for all of them would be a very big deal.

I've embedded an xCode Project that you can run to reproduce, I'll explain below the best I can as well. 
(Excuse my sloppiness, I don't actually do any xCode programming, I simply learned this much as to get the issue isolated and make a bug report)

To Reproduce.
Start with this DOM Structure (already setup in the included xCode project)

Position a DIV absolutely with these styles
{
 position: absolute;
 top: 0; bottom: 0; left: 0; right: 0 
}

Inside that, include a div with these styles
{ 
 height: 100%; overflow: auto;
 -webkit-overflow-scrolling: touch;
}

Inside that include an iframe with these styles
{ height: 100% }

The iframe should link to a long page with input elements up and down the page.
You could just link to the page I created for this
http://www.justise.com/prototype/scrolltotop2.html

To reproduce the actual issue now

Without Scrolling you should be able to click any of the radio buttons

Now scroll down the page

Trying to click any of the radio buttons on the left results in an offset click. One of the radio buttons below your click will receive the event.

Expected:
The radio button I clicked on gets focus

Actual:
The click event is offset the amount the iframe was scrolled.


Notes:
The first div that is positioned absolutely is a major culprit here. I could not reproduce it till I added that code in.
I'm simply reproducing the structure of the Salesforce1 application in this example. While it makes sense not to wrap it all in the absolutely positioned div, it's just the way our app is structured currently and we would prefer not to have to re-architect it to work around issues such as this.
Comment 1 Benjamin Poulain 2014-07-03 12:15:32 PDT
I can reproduce with WebKit ToT. It seems to be only with the old UIWebView, I cannot reproduce with WKWebView.

Simon, any idea what is going on? My first suspect was the iframe but the wrong hit testing only happens when you scroll.

Kris, if you get a chance, can you try the same use case with WKWebView in iOS 8? WKWebView is a new API using WebKit2, everything is brand new. It is a lot more powerful than the old UIWebView.
Comment 2 Kris Gray 2014-07-07 14:28:23 PDT
Will try thx.
Comment 3 Kris Gray 2014-07-07 15:32:32 PDT
Doesn't appear to reproduce on the new WKWebView. 

It'll take us a while to get the Salesforce app onto iOS8 though since we'll still have quite a few customers on iOS7, so this will still be an issue. 

So far, the WKWebView is functioning wonderfully though. Kudos.
Comment 4 Benjamin Poulain 2014-07-07 17:55:43 PDT
(In reply to comment #3)
> Doesn't appear to reproduce on the new WKWebView. 
> 
> It'll take us a while to get the Salesforce app onto iOS8 though since we'll still have quite a few customers on iOS7, so this will still be an issue. 
> 
> So far, the WKWebView is functioning wonderfully though. Kudos.

Even if someone finds the issue, that's not gonna go back to iOS 7.

I suspect it is related to the WAKView hierarchy which is specific to UIWebView. I don't think fixing this for UIWebView should be high priority, our time would be better spent fixing more WKWebView issues.
Comment 5 JT 2014-09-30 10:41:14 PDT
A few other notes that hopefully make it easier to identity and more likely to be fixed:

This not only affects native and hybrid downloadable apps using UIWebview, but even oneapp home screen launchers created from within Safari. Is this the same renderer or do they share come library code?

This is still evident in iOS 8.0.2

It can be reproduce in XCode 6.0.1 emulators for iOS 8.

Although the clicked target element is offset by the scroll amount, the event screenX and screenY attributes seem to be correct, returning the position of the actual element, not the reacting element from lower in the page.

This also affects touch and hold to select text or paste from the clipboard.

If I wrap the iframe with a div styled like this, it always shows the problem:
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  position:relative;

But if I remove one line, overflow:auto, the issues goes away.
  height:100%;
  -webkit-overflow-scrolling: touch;
  position:relative;
Comment 6 JT 2014-09-30 10:52:15 PDT
Also, an earlier post mentioned that any fix wouldn't likely be backported to 7.x.  At least in our testing, we have not seen the issue in anything prior to iOS 8.0.
Comment 7 Benjamin Poulain 2014-10-01 21:02:11 PDT
Created attachment 239082 [details]
Patch
Comment 8 WebKit Commit Bot 2014-10-01 23:11:05 PDT
Comment on attachment 239082 [details]
Patch

Clearing flags on attachment: 239082

Committed r174199: <http://trac.webkit.org/changeset/174199>
Comment 9 WebKit Commit Bot 2014-10-01 23:11:10 PDT
All reviewed patches have been landed.  Closing bug.
Comment 10 JT 2014-10-02 12:14:21 PDT
This is great news, thanks.

Is there a way to identify which iOS version will contain this fix?
Comment 11 Benjamin Poulain 2014-10-02 15:01:58 PDT
(In reply to comment #10)
> This is great news, thanks.
> 
> Is there a way to identify which iOS version will contain this fix?

Not here, we do not discuss release plans publicly. You should contact your Apple evangelist directly to get more information.