Apache Cordova
  1. Apache Cordova
  2. CB-593

Click and touch events do not fire after using scroll CSS

    Details

      Description

      Dear Shazron, devs

      After using "-webkit-overflow-scrolling: touch", then regenerate the html via DOM, there is a "dead zone" at the top of the screen. Only happen on a device.

      Step to reproduce:
      1. Download index.html at http://pastebin.com/JwL412fy
      2. Create app, install on a device.
      3. Follow on-screen instruction.

      Refer original thread & complaint here: http://groups.google.com/group/phonegap/browse_thread/thread/5709ec3df6764664/66da304f714915f4?lnk=gst&q=webkit-overflow-scrolling#66da304f714915f4

      Please advice / assist.

      Thanks.

        Issue Links

          Activity

          Hide
          Neale Genereux added a comment -

          This issue is more than minor for my current project, as native scrolling is the only solution that provides acceptable performance for the complex scrollable view we are implementing. Is there any kind of ETA on when someone will have a chance to check this out?

          Show
          Neale Genereux added a comment - This issue is more than minor for my current project, as native scrolling is the only solution that provides acceptable performance for the complex scrollable view we are implementing. Is there any kind of ETA on when someone will have a chance to check this out?
          Hide
          Shazron Abdullah added a comment -

          Please report whether it happens on Mobile Safari as well. This might be a CordovaJS thing, tagging.

          Show
          Shazron Abdullah added a comment - Please report whether it happens on Mobile Safari as well. This might be a CordovaJS thing, tagging.
          Hide
          Amirudin Bin Mohamed Ghani added a comment -

          Thanks Shaz

          The problem didn't occur on Mobile Safari. Tested by hosting the file(http://pastebin.com/JwL412fy) on local webserver (localhost) and run the url from Mobile Safari.

          Cheers~

          Show
          Amirudin Bin Mohamed Ghani added a comment - Thanks Shaz The problem didn't occur on Mobile Safari. Tested by hosting the file( http://pastebin.com/JwL412fy ) on local webserver (localhost) and run the url from Mobile Safari. Cheers~
          Hide
          Filip Maj added a comment -

          Not sure how this would be a cordova-js issue. We do not attach event handlers to touch or anything like that.

          If it didn't happen on Mobile Safari it may be a difference between UIWebView and Mobile Safari too.

          Can anyone narrow this problem down to any specific JavaScript executing inside cordova.js ?

          Show
          Filip Maj added a comment - Not sure how this would be a cordova-js issue. We do not attach event handlers to touch or anything like that. If it didn't happen on Mobile Safari it may be a difference between UIWebView and Mobile Safari too. Can anyone narrow this problem down to any specific JavaScript executing inside cordova.js ?
          Hide
          Filip Maj added a comment -

          To test if this is a UIWebView issue, create a simple native iOS app that fires up a vanilla webview. Toss your example HTML assets into it (minus phonegap.js or cordova.js). See if it still happens.

          I would test this but am about to board a flight and out of action until Monday.

          Show
          Filip Maj added a comment - To test if this is a UIWebView issue, create a simple native iOS app that fires up a vanilla webview. Toss your example HTML assets into it (minus phonegap.js or cordova.js). See if it still happens. I would test this but am about to board a flight and out of action until Monday.
          Hide
          Neale Genereux added a comment -

          Any update on this issue?

          Show
          Neale Genereux added a comment - Any update on this issue?
          Hide
          Steve Sims added a comment -

          I'm suffering from this problem too.

          This problem is caused by the inclusion of Cordova's iframe in the DOM. This breaks native touch scrolling, and can make parts of the screen stop responding to touches.

          A partial solution to this problem, as has been pointed out elsewhere, is to get rid of the iframe and signal Cordova's native layer by changing document.location. That breaks compatibility with some plugins though such as the Facebook and Google Analytics plugins. (I've tried many variations of this, such as using a transient iframe, or making Cordova's own iframe be transient, all to no avail.)

          I've not been able to work out yet why using different signalling methods breaks the plugins. If anyone has any hints/tips/ideas I'd love to hear them.

          Show
          Steve Sims added a comment - I'm suffering from this problem too. This problem is caused by the inclusion of Cordova's iframe in the DOM. This breaks native touch scrolling, and can make parts of the screen stop responding to touches. A partial solution to this problem, as has been pointed out elsewhere, is to get rid of the iframe and signal Cordova's native layer by changing document.location. That breaks compatibility with some plugins though such as the Facebook and Google Analytics plugins. (I've tried many variations of this, such as using a transient iframe, or making Cordova's own iframe be transient, all to no avail.) I've not been able to work out yet why using different signalling methods breaks the plugins. If anyone has any hints/tips/ideas I'd love to hear them.
          Hide
          Neale Genereux added a comment -

          This sounds promising. You mention that the workaround has been detailed elsewhere, do you have a link that provides more information on how to implement it?

          Show
          Neale Genereux added a comment - This sounds promising. You mention that the workaround has been detailed elsewhere, do you have a link that provides more information on how to implement it?
          Hide
          Steve Sims added a comment -

          The workaround was documented here:
          http://groups.google.com/group/phonegap/msg/7beee231774af8c9

          My alternative attempt at a workaround was to comment out all the gapBridge code (as TimW did in the workaround linked above) and replace it with the following:
          var iframe = document.createElement("iframe");
          iframe.setAttribute("src", "gap://ready");
          document.documentElement.appendChild(iframe);
          iframe.parentNode.removeChild(iframe);
          iframe = null;

          I found when using these workarounds that, as well as the Facebook and Google Analytics plugins failing, console.log calls would also tend to break. (On a separate point, I'd really love to disable Cordova's console.log override, since it stops console.log output being sent to the inbuilt remote webkit inspector.)

          From some additional debugging code I added in, it would appear as if Cordova stops sending "gap://ready" messages through to the native environment. I've not been able to establish why that's the case. Unfortunately I don't have the time right now to dig any deeper into this issue, and not being familiar with Cordova's codebase I'm shooting in the dark when looking for solutions.

          I don't understand why my solution doesn't work, but perhaps a Cordova developer may have an insight into this?

          Show
          Steve Sims added a comment - The workaround was documented here: http://groups.google.com/group/phonegap/msg/7beee231774af8c9 My alternative attempt at a workaround was to comment out all the gapBridge code (as TimW did in the workaround linked above) and replace it with the following: var iframe = document.createElement("iframe"); iframe.setAttribute("src", "gap://ready"); document.documentElement.appendChild(iframe); iframe.parentNode.removeChild(iframe); iframe = null; I found when using these workarounds that, as well as the Facebook and Google Analytics plugins failing, console.log calls would also tend to break. (On a separate point, I'd really love to disable Cordova's console.log override, since it stops console.log output being sent to the inbuilt remote webkit inspector.) From some additional debugging code I added in, it would appear as if Cordova stops sending "gap://ready" messages through to the native environment. I've not been able to establish why that's the case. Unfortunately I don't have the time right now to dig any deeper into this issue, and not being familiar with Cordova's codebase I'm shooting in the dark when looking for solutions. I don't understand why my solution doesn't work, but perhaps a Cordova developer may have an insight into this?
          Hide
          Steve Sims added a comment -

          Further to my earlier comment, I made a minor change to my transient iframe generation, so the code now reads as follows:
          var iframe = document.createElement("iframe");
          document.documentElement.appendChild(iframe);
          iframe.src = "gap://ready";
          window.setTimeout(function()

          { iframe.parentNode.removeChild(iframe); iframe = null; }

          , 0);

          Now that I've done that, it appears as if Cordova is functioning correctly, and velocity scrolling is too.

          Show
          Steve Sims added a comment - Further to my earlier comment, I made a minor change to my transient iframe generation, so the code now reads as follows: var iframe = document.createElement("iframe"); document.documentElement.appendChild(iframe); iframe.src = "gap://ready"; window.setTimeout(function() { iframe.parentNode.removeChild(iframe); iframe = null; } , 0); Now that I've done that, it appears as if Cordova is functioning correctly, and velocity scrolling is too.
          Hide
          Kuan Yi Ming added a comment -

          We've got another issue like this on the new iPad from the support forums. Affects all versions of Cordova including 2.0. Could not replicate this on older iPads: https://phonegap.tenderapp.com/discussions/problems/766-uiweboverflowscrollview-exception-in-phonegap-application

          Already got the guy with the issue to provide sample code and instructions to replicate the issue if that helps.

          Show
          Kuan Yi Ming added a comment - We've got another issue like this on the new iPad from the support forums. Affects all versions of Cordova including 2.0. Could not replicate this on older iPads: https://phonegap.tenderapp.com/discussions/problems/766-uiweboverflowscrollview-exception-in-phonegap-application Already got the guy with the issue to provide sample code and instructions to replicate the issue if that helps.
          Hide
          Roswell Masterson added a comment -

          The issue also appears on the iPhone simulator (iOS 5.1.1).
          As Steve Sims commented above it is related to the 'iframe' used by cordova to communicate with the native code.
          I've tried Steve's solution but it didn't work for me so I took slightly different approach -
          once I get to the office I will post the code that worked for me, hopefully it could help someone else.

          Show
          Roswell Masterson added a comment - The issue also appears on the iPhone simulator (iOS 5.1.1). As Steve Sims commented above it is related to the 'iframe' used by cordova to communicate with the native code. I've tried Steve's solution but it didn't work for me so I took slightly different approach - once I get to the office I will post the code that worked for me, hopefully it could help someone else.
          Hide
          Roswell Masterson added a comment - - edited

          Here's the code that worked for me without interfering with the other 'cordova' functionality that I use.
          I've added following code at the bottom of 'createGapBridge' function:

          if (gapInterval === null) {
          gapInterval = window.setInterval(function () {
          if (cordova.commandQueue.length === 0 && cordova.commandQueueFlushing === false) {
          if (gapBridge)

          { gapBridge.parentNode.removeChild(gapBridge); gapBridge = null; }

          clearInterval(gapInterval);
          gapInterval = null;
          }
          }, 500);
          }

          One should play with the interval time.
          In my tests setting it to less than 500 results in cordova occasionally not executing the native code.

          This is tested on v1.8.0.

          Show
          Roswell Masterson added a comment - - edited Here's the code that worked for me without interfering with the other 'cordova' functionality that I use. I've added following code at the bottom of 'createGapBridge' function: if (gapInterval === null) { gapInterval = window.setInterval(function () { if (cordova.commandQueue.length === 0 && cordova.commandQueueFlushing === false) { if (gapBridge) { gapBridge.parentNode.removeChild(gapBridge); gapBridge = null; } clearInterval(gapInterval); gapInterval = null; } }, 500); } One should play with the interval time. In my tests setting it to less than 500 results in cordova occasionally not executing the native code. This is tested on v1.8.0.
          Hide
          Daniel Cervantes added a comment -

          Roswell's solution appears to work if you exclude the gapInterval null check for v2.0.0

          Show
          Daniel Cervantes added a comment - Roswell's solution appears to work if you exclude the gapInterval null check for v2.0.0
          Hide
          Roswell Masterson added a comment -

          I forgot to mention that 'gapInterval' is new variable that I've introduced.
          I've declared and initialized to 'null' above the 'createGapBridge' function.

          Show
          Roswell Masterson added a comment - I forgot to mention that 'gapInterval' is new variable that I've introduced. I've declared and initialized to 'null' above the 'createGapBridge' function.
          Hide
          Matthew Windwer added a comment -

          Thanks Roswell works for me on cordova 2.0!!! I was just about to resort to iscroll I think this bug should be more than minor priority.

          Show
          Matthew Windwer added a comment - Thanks Roswell works for me on cordova 2.0!!! I was just about to resort to iscroll I think this bug should be more than minor priority.
          Hide
          Andrew Grieve added a comment -

          I did some experimentation today to see if using a registered URIProtocol to send messages to the native side. It functions about twice as slow, but seems like it would be a good work-around to this problem. What I'm thinking here is that we have a few options:

          a) Always use a URIProtocol for communication and live with the slower bridge
          b) Use an iframe for the first message, then use a URIProtocol for all messages for the next 500 milliseconds, then switch back to iframe.
          c) Allow apps to choose between the two techniques at run-time/compile-time.

          I think a) is probably the most preferable option, since although the bridge will be slower, it is still probably fast enough. Opinions?

          Demo branch at: https://github.com/agrieve/incubator-cordova-ios/tree/exec_bridge

          Show
          Andrew Grieve added a comment - I did some experimentation today to see if using a registered URIProtocol to send messages to the native side. It functions about twice as slow, but seems like it would be a good work-around to this problem. What I'm thinking here is that we have a few options: a) Always use a URIProtocol for communication and live with the slower bridge b) Use an iframe for the first message, then use a URIProtocol for all messages for the next 500 milliseconds, then switch back to iframe. c) Allow apps to choose between the two techniques at run-time/compile-time. I think a) is probably the most preferable option, since although the bridge will be slower, it is still probably fast enough. Opinions? Demo branch at: https://github.com/agrieve/incubator-cordova-ios/tree/exec_bridge
          Hide
          Shazron Abdullah added a comment -

          Thanks Andrew. Option A - I think that merits more investigation and testing. Might as well test it out in the wild, with participants in this thread, and especially since we have a long time before the next release (late Sept for 2.1.0). Option C would be great as a complement, just in case (but I'd rather all or nothing).

          Show
          Shazron Abdullah added a comment - Thanks Andrew. Option A - I think that merits more investigation and testing. Might as well test it out in the wild, with participants in this thread, and especially since we have a long time before the next release (late Sept for 2.1.0). Option C would be great as a complement, just in case (but I'd rather all or nothing).
          Hide
          Andrew Grieve added a comment -

          Sounds good. I'm going to work on this some more today and report back.

          Show
          Andrew Grieve added a comment - Sounds good. I'm going to work on this some more today and report back.
          Hide
          Andrew Grieve added a comment -

          I've cleaned it up and have it on hosted here (different branch from previously):

          https://github.com/agrieve/incubator-cordova-ios/tree/exec
          https://github.com/agrieve/incubator-cordova-js/tree/ios_exec

          If anyone is able to patch it in and give it a try that would be appreciated. It should "just work" (no extra tweaks required to enable it), and doesn't use an iframe, so I expect it to work around the scrolling bug.

          You need to patch in only the incubator-cordova-ios and use the js in CordovaLib/javascript.

          If it works, let us know and we'll move forward with making this change for 2.1.

          Show
          Andrew Grieve added a comment - I've cleaned it up and have it on hosted here (different branch from previously): https://github.com/agrieve/incubator-cordova-ios/tree/exec https://github.com/agrieve/incubator-cordova-js/tree/ios_exec If anyone is able to patch it in and give it a try that would be appreciated. It should "just work" (no extra tweaks required to enable it), and doesn't use an iframe, so I expect it to work around the scrolling bug. You need to patch in only the incubator-cordova-ios and use the js in CordovaLib/javascript. If it works, let us know and we'll move forward with making this change for 2.1.
          Hide
          Andrew Grieve added a comment -

          I've moved the code into the main branch where it is turned off by default. To use the iframe-less bridge on tip-of-tree:

          var exec = cordova.require('cordova/exec');
          exec.setJsToNativeBridgeMode(exec.jsToNativeModes.XHR_OPTIONAL_PAYLOAD);

          We are still trying to evaluate whether to support this method, so please us know if it fixes this issue or not.

          Show
          Andrew Grieve added a comment - I've moved the code into the main branch where it is turned off by default. To use the iframe-less bridge on tip-of-tree: var exec = cordova.require('cordova/exec'); exec.setJsToNativeBridgeMode(exec.jsToNativeModes.XHR_OPTIONAL_PAYLOAD); We are still trying to evaluate whether to support this method, so please us know if it fixes this issue or not.
          Hide
          Matthew Windwer added a comment -

          Andrew, so far so good. Latest from github fixes webkit-overflow-scrolling issue. Do not notice any side-effects. I currently have a few plugins installed, including UrbanAirship, ApplicationPreferences, and InAppPurchases... all working as expected.

          Show
          Matthew Windwer added a comment - Andrew, so far so good. Latest from github fixes webkit-overflow-scrolling issue. Do not notice any side-effects. I currently have a few plugins installed, including UrbanAirship, ApplicationPreferences, and InAppPurchases... all working as expected.
          Hide
          Tom Clarkson added a comment -

          This solution is working well for me. I was only seeing the dead zone issue intermittently, but safely removing the iframe also fixes a more obvious problem with scroll orientation being reversed (https://groups.google.com/forum/?fromgroups=#!topic/phonegap/n2k-OvqCDcE)

          Show
          Tom Clarkson added a comment - This solution is working well for me. I was only seeing the dead zone issue intermittently, but safely removing the iframe also fixes a more obvious problem with scroll orientation being reversed ( https://groups.google.com/forum/?fromgroups=#!topic/phonegap/n2k-OvqCDcE )
          Show
          Andrew Grieve added a comment - Made XHR mode the default for 2.1.0 https://git-wip-us.apache.org/repos/asf?p=incubator-cordova-js.git;a=commit;h=aa1380d84261132399900ddb2d52f6b440cef694
          Hide
          Shazron Abdullah added a comment - - edited

          xhr mode breaks iOS 4.2.1: CB-1296

          Show
          Shazron Abdullah added a comment - - edited xhr mode breaks iOS 4.2.1: CB-1296

            People

            • Assignee:
              Andrew Grieve
              Reporter:
              Amirudin Bin Mohamed Ghani
            • Votes:
              8 Vote for this issue
              Watchers:
              10 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development