Quick Tap and Scrolling Issues in Mobile Web App Development

Today I started developing a jQuery plugin which is designed to eliminate the delay that the browser experiences on click events within mobile web apps.

I wanted it to do the following:
  1. Trigger the onclick event sooner to feel more native.
  2. Highlight the button when the user started the touch.
  3. Unhighlight the button if the user started to scroll or when the user ended the tap event.
I did get it to trigger the onclick event sooner, but I ran into some problems with the highlighting:
  1. On the iPhone 5 and iPod Touch 4, when scrolling (using -webkit-overflow-scrolling:touch), and then tapping while the scroll is still going, the wrong button would get highlighted. (Removing -webkit-overflow-scrolling:touch resolved the issue, but then my list didn't scroll like a native app.)
  2. On the iPod Touch 4 sometimes when just tapping it would only highlight part of the button (either the top or bottom depending on where on the button I tapped.) (Removing -webkit-overflow-scrolling:touch resolved the issue, but I want to be able to use that css.)
  3. On the iPod Touch 4 I also found that if I held the button too long, I got Safari's Copy or Define menu to come up. When trying to tap away from it or scroll, it made the page go really slow for a few seconds.
  4. On the Galaxy Note 2, when scrolling a list of buttons, if my code was set to highlight the button during ontouchstart, then there is a noticeable lag in rendering the highlighted version of the button. Also when scrolling up and down a lot, multiple buttons would stay highlighted.
  5. On the Galaxy S1 Fascinate, the the list wouldn't even scroll, plus when I tapped the buttons, they would highlight with the color I specified, but then it would highlight in orange (which I did not specify). Once the orange highlight was gone less than half a second later, then the button was left with an orange outline which I did not specify either.


Popular posts from this blog

Tic Tac Toe - Using App Inventor Beta

Parameters Sent by TinyWebDB in App Inventor for Android