PhoneGap + jQuery =使用onclick进行奇怪的重绘闪烁？ （动画不透明度会导致闪烁）

Question

我正在使用带有PhoneGap的jQuery构建一个iPad应用程序。

我使用绝对定位的div构建了一个模态窗口，我使用-webkit-transform: translate3d(0,80px,0)

将其设置为动画

在这个div中，我有一个简单的菜单，包含一个UL，每个LI都向左浮动。

我已将此jQuery添加到其中以允许突出显示所选项目：

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

这一切都按预期工作，除了当我点击其中一个LI时，我也得到这个非常奇怪的屏幕故障，看起来模态DIV失去定位一秒然后回来。你会看到这个闪烁，模态正在向屏幕左侧移动并再次返回。

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

我将开始逐一拆解它，看看我是否能找到罪魁祸首，但我想在这里也会问，以防这种方式存在涉及jQuery事件和PhoneGap的已知问题？

更新：

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

更新2：

我继续为.bind换掉了一个jquery .click（）（'touchstart'...）

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

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

Answer 1

花了一些时间把它缩小并找到了罪魁祸首。问题是不透明。

默认情况下，我正在应用touchstart事件的元素具有以下样式：

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

该事件增加了一个类：

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

执行此操作会导致其内部的DIV快速重绘，从而导致此闪烁。

事实证明，解决方案是不要将不透明度完全改为1.这样可以避免闪烁：

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

奇妙！