PhoneGap+；jQuery=用onclick重新绘制的奇怪闪烁？（设置不透明度动画会导致闪烁）

我正在使用jQuery和PhoneGap构建一个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;
   }); 

这一切都按预期进行，只是当我点击其中一个LIs时，我也遇到了一个非常奇怪的屏幕故障，在这个故障中，modal DIV失去了定位一秒钟，然后又回来了。您可以看到这种闪烁，显示模式正在向屏幕的左侧移动，然后再次返回

这在模拟器和iPad2本身中都会发生

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

更新：

所以你可以看到奇怪的闪烁：

更新2：

我接着用jquery.click（）替换了.bind（'touchstart'…）

正如预期的那样，它感觉更灵敏了一点，但我仍然得到完全相同的奇怪屏幕重画/闪烁

---

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

花了一些时间缩小范围，找到了罪犯。问题是不透明

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

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

事件将添加一个类：

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

这样做会导致其内部的DIV快速重新绘制，从而导致此闪烁

事实证明，解决方案就是不将不透明度完全更改为1。这在没有闪烁的情况下工作：

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

---

奇怪

我遇到了一个类似的问题，这似乎减少了问题，但没有完全消除问题我也遇到了类似的问题，我通过使用visibility:collapse/visible解决了这个问题，后来才使用不透明度。唯一的问题是，当您使用rgba（）时，这个问题无法解决，rgba（）只对颜色进行不透明度处理。