PhoneGap + jQuery =奇怪的重绘与onclick闪烁？ （动画不透明导致闪烁）

Question

我使用jQuery与PhoneGap构建iPad应用程序。

我已经使用绝对定位的div，我使用-webkit-transform: translate3d(0,80px,0)

在这个div我有一个简单的菜单，包括一个UL的每个李向左浮动动画到位建立了一个模态窗口。

我已经添加了这个jQuery来它允许选择的项目加以强调：

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

这一切都按预期工作，只是当我点击LIS之一，我也得到这个非常奇怪屏幕毛刺，看起来模式DIV放松了一秒钟然后回来。你看到这个闪烁的地方，模式正在移到屏幕的左边，然后再次返回。

这发生在模拟器和iPad 2本身。

我打算逐个拆除它，看看我能否找到罪魁祸首，但是我认为如果有这样一个涉及jQuery事件和PhoneGap的已知问题，我也会在这里询问？

UPDATE：

Here's a short video of it in operation，所以你可以看到奇怪的闪烁：

更新2：

我继续换出一个jQuery。点击（）的.bind（ 'touchstart' ...）

正如预期的那样，它感觉有点响应，但我仍然得到完全相同的怪异屏幕重绘/闪烁。

更新3：解决方案！找到了！在下面添加回答...

Answer 1

花了一些时间，缩小了范围，找到了罪魁祸首。这个问题是不透明的。

通过默认我申请的touchstart事件的元素具有这种风格：

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

事件增加了一类：

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

这样做会导致DIV，这是与内快速重绘导致这种闪烁。

事实证明，该解决方案是只是不透明度改为完全1.本作品，未经闪烁：

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

怪异！