Question

I’m using jQuery with PhoneGap building an iPad app.

I have built a modal window using an absolutely positioned div that I animate into place using -webkit-transform: translate3d(0,80px,0)

Within this div I have a simple menu consisting of a UL with each LI floated left.

I’ve added this jQuery to it to allow the selected item to be highlighted:

var $optionsPlayers = $('#optionlist-players li');
$optionsPlayers.click(function () {
    $optionsPlayers.filter('.selected').removeClass('selected');
    $(this).addClass('selected');
    players = ($(this).index()) + 1;
   }); 

This all works as intended, except that when I click one of the LIs, I also get this very weird screen glitch where it appears that the modal DIV looses positioning for a second then comes back. You see this flicker where it appears the modal is shifting to the left of the screen and back again.

This happens in both the simulator and the iPad 2 itself.

I’m going to start dismantling it all piece by piece to see if I can find what the culprit is, but thought I’d also ask in here in case there’s a known issue involving jQuery events and PhoneGap in this manner?

UPDATE:

Here’s a short video of it in operation so you can see the weird flicker:

UPDATE 2:

I went ahead and swapped out a jquery .click() for a .bind(‘touchstart’…)

As expected, it feels a bit more responsive, but I still get the exact same weird screen redraw/flicker.

UPDATE 3: SOLUTION! Found it! Adding answer below…

Answer 1

Spent some time and narrowed it down and found the culprit. The issue is opacity.

By default the element I’m applying the touchstart event has this style:

.example {
   -webkit-opacity: .25;
}

The event adds a class:

.example.selected {
    -webkit-opacity: 1;
}

Doing this causes the DIV that this is inside of to redraw quickly causing this flicker.

It turns out that the solution is to just not change the opacity to completely 1. This works without the flicker:

.example.selected {
    -webkit-opacity: .99;
}

Bizarre!