translate3d使元素跳跃

Question

我使用transform的translate3d将弹出式div置于容器的中心。

//CSS公司要素{显示：无；不透明度：0；顶部：50%；左：50%；转换：translate3d（-50%，-50%，0）；}//JS公司$btn.click（函数（）{$popupContainer1.velocity（{opacity:1}，{display:“block”}）；});

在桌面浏览器中，它工作得很好，但在移动浏览器中，会跳转。当用户单击按钮时，弹出的div会得到不透明度值1和显示属性到块来自JavaScript。它显示在假定位置的下方和左侧，然后移动到实际位置。

我尝试按照Stackoverflow中的许多帖子中的建议应用以下代码片段进行改进，但没有成功。

-webkit背面可见性：隐藏；

点击弹出式容器上的关闭按钮可使用以下功能进行处理。

$rdCloseBtn.click（函数（）{$rdPopupElements.velocity（{opacity:0}{显示：'无'，mobileHA:错误});设置默认值（）；});

我用以下代码重置动画。

函数setDefault（id）{如果（id===0）{$rdPopupElement0.velocity（{不透明度：0}，0）；$rdPopupElement_0_Text.velocity（{不透明度：0}，0）；$rdPopupElement0Clock.velocity（{不透明度：0}，0）；$rdJumpingArrow.velocity（{不透明度：0}，0）；$rdClockingArrow0.velocity（{不透明度：0}，0）；$rdClockingFiller0.velocity（{不透明度：0}，0）；$rdClockingArrow1.velocity（{不透明度：0}，0）；}else if（id===1）{$rdPopupElement1.velocity（{opacity:0}，0）；$rdRS0.velocity（{不透明度：0}，0）；$imgClipBoardClock.velocity（{不透明度：0}，0）；$rdRS1.velocity（{不透明度：0}，0）；$rdTick0.velocity（{不透明度：0}，0）；$rdTick1.velocity（{不透明度：0}，0）；$rdPopupElement_1_Text.velocity（{不透明度：0}，0）；$rdClipboardClock.velocity（{不透明度：0}，0）；}else if（id===2）{$rdPopupElement2.velocity（{opacity:0}，0）；$rdMaginifier.velocity（{不透明度：0}，0）；$rdRedDot.velocity（{不透明度：0}，0）；$rdMagFiller.velocity（{不透明度：0}，0）；$rdArrowFlow.velocity（{不透明度：0}，0）；$rdPopupElement_2_Text.velocity（{不透明度：0}，0）；}其他{setDefault（0）；设置默认值（1）；设置默认值（2）；}}

Answer 1

这是使用Velocity v1-这不是最好的转型是令人担忧的，因为在移动设备上，它试图摆弄转型我有一种感觉，这里正在发生这种事。至少尝试添加选项mobileHA:错误看看这是否有帮助。

如果做不到这一点，不妨试试Velocity v2测试版（有关详细信息，请查看github页面），显示成为一个属性而不是一个选项，但（目前）它没有移动硬件加速功能（移动设备和浏览器从那时起得到了改进），而且它将不会影响您的属性，它仍处于测试阶段，而我正在解决一些错误，并确保它具有足够的质量！