3

I have a small script which utilises jQuery Mobile's swipeleft and swiperight events to change the text within div elements. Since upgrading various Apple devices to iOS7, it doesn't function correctly.

I've set up a simple fiddle reproducing the problem, here.

Sample jQuery

$('#container').on('swipeleft swiperight', '.score', function(e) {
    $(this).text( parseInt($(this).text(), 10) + (e.type == 'swipeleft' ? -1 : +1) );
});

Sample Markup

<div id="container">
    <div class="score">0</div>
    <div class="score">0</div>
</div>

If you swipeleft or swiperight a number of times on each div.score, it starts to behave erratically, there's huge lag before the event fires, sometimes it doesn't fire at all until you interact with the screen again (scrolling/touching etc.)

I'm pretty sure this isn't specific to a single device as I've tested, and get the same results on various devices (2x iPhone 5s', iPhone 5, iPhone 4, iPad 2nd gen and iPad 4th gen).

This worked flawlessly before upgrading to iOS7, I've tried searching to see if anyone else has come across this problem, or to see if its a known bug with Safari Mobile in iOS7 but I can't find anything.

If anyone can offer an explanation, or possible solutions I'd appreciate it greatly.

billyonecan
  • 20,090
  • 8
  • 42
  • 64
  • 2
    True, I just tested it on iPhone5 iOS 7.0.2. maybe it has to do with Safari new update, where swiping right goes back to previous page. – Omar Oct 03 '13 at 16:27
  • I suggest against using left/right swipe .. modern mobile browsers now attribute that to switching to previous/next tab.. tested on iOS7 and Android Chrome – krilovich Oct 03 '13 at 17:01
  • I have modified the horizontal threshold to 20px instead of 30px (default), it performed better but, of course, more sensitive. http://jsfiddle.net/Palestinian/RgNSJ/ – Omar Oct 03 '13 at 17:06

1 Answers1

0

Using setTimeout() appears to fix the problem:

$('#container').on('swipeleft swiperight', '.score', function(e) {
  var $this = $(this);
  setTimeout(function() {
    $this.text( parseInt($this.text(), 10) + (e.type == 'swipeleft' ? -1 : +1) );
  }, 0);
});

Some useful information can be found here

Here's a fiddle

Community
  • 1
  • 1
billyonecan
  • 20,090
  • 8
  • 42
  • 64