Css translate3d使元素跳跃

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

//CSS
element
{
    display: none;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

//JS
    $btn.click(function(){
         $popupContainer1.velocity({ opacity: 1}, { display: "block"});
    });

在桌面浏览器中，它可以正常工作，但在移动浏览器中，它会跳跃。当用户单击按钮时，弹出div从JavaScript获取不透明度值1和显示属性到块。它显示在假设位置的下方和左侧，然后移动到实际位置

我在Stackoverflow的许多帖子中都建议应用下面的代码片段进行改进，但没有成功

-webkit-backface-visibility: hidden;

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

$rdCloseBtn.click(function(){
        $rdPopupElements.velocity({ opacity : 0 }, {
            display : 'none',
            mobileHA: false
        });
        setDefault();
    });

我用下面的代码重置了动画

function setDefault(id){
        if (id === 0) {
            $rdPopupElement0.velocity({ opacity : 0 }, 0);
            $rdPopupElement_0_Text.velocity({ opacity : 0 }, 0);
            $rdPopupElement0Clock.velocity({ opacity : 0 }, 0);
            $rdJumpingArrow.velocity({ opacity : 0 }, 0);
            $rdClockingArrow0.velocity({ opacity : 0 }, 0);
            $rdClockingFiller0.velocity({ opacity : 0 }, 0);
            $rdClockingArrow1.velocity({ opacity : 0 }, 0);
        }
        else if (id === 1) {
            $rdPopupElement1.velocity({ opacity : 0 }, 0);
            $rdRS0.velocity({ opacity : 0 }, 0);
            $imgClipBoardClock.velocity({ opacity : 0 }, 0);
            $rdRS1.velocity({ opacity : 0 }, 0);
            $rdTick0.velocity({ opacity : 0 }, 0);
            $rdTick1.velocity({ opacity : 0 }, 0);

            $rdPopupElement_1_Text.velocity({ opacity : 0 }, 0);
            $rdClipboardClock.velocity({ opacity : 0 }, 0);
        }
        else if (id === 2) {
            $rdPopupElement2.velocity({ opacity : 0 }, 0);
            $rdMaginifier.velocity({ opacity : 0 }, 0);
            $rdRedDot.velocity({ opacity : 0 }, 0);
            $rdMagFiller.velocity({ opacity : 0 }, 0);
            $rdArrowFlow.velocity({ opacity : 0 }, 0);
            $rdPopupElement_2_Text.velocity({ opacity : 0 }, 0);
        }

        else {
            setDefault(0);
            setDefault(1);
            setDefault(2);
        }

    }

---

这是使用Velocity v1，这在涉及

transform

的情况下不是最好的，因为在移动设备上，它试图搞乱

transform

属性本身，我感觉这里正在发生这种情况。至少尝试添加选项

mobileHA:false

，看看是否有帮助

---

如果做不到这一点，不妨看看Velocity v2 beta版的试用版（查看github页面了解详细信息），

display

成为一个属性而不是一个选项，但是（目前）它没有移动硬件加速功能（移动设备和浏览器从那以后都有了改进）-而且它会让你的属性不受影响-它仍处于测试阶段，而我正在消除一些bug，并确保它的质量足够好

这是在使用Velocity v1，这在

transform

方面不是最好的，因为在移动设备上，它试图搞乱

transform

属性本身，我有一种感觉正在发生。至少尝试添加选项

mobileHA:false

，看看是否有帮助

---

如果做不到这一点，不妨看看Velocity v2 beta版的试用版（查看github页面了解详细信息），

display

成为一个属性而不是一个选项，但是（目前）它没有移动硬件加速功能（移动设备和浏览器从那以后都有了改进）-而且它会让你的属性不受影响-它仍处于测试阶段，而我正在消除一些bug，并确保它的质量足够好

我猜这是由于翻译，尝试它与绝对位置，看看它是否跳跃。如果没有，你会知道为什么你想尝试

翻译（-50%，-50%）

而不是translate3d，只要确保这不是问题所在。你在哪个手机浏览器中看到了问题？手机中的Safari、Chrome和Firefox。@Ravan我试过translate；它没有解决问题。我猜这是由于翻译，尝试与绝对位置，看看它是否跳跃。如果没有，你会知道为什么你想尝试

翻译（-50%，-50%）

而不是translate3d，只要确保这不是问题所在。你在哪个手机浏览器中看到了问题？手机中的Safari、Chrome和Firefox。@Ravan我试过translate；这并没有解决问题。mobileHA：错误的工作原理，但它带来了新的问题。我有完整的弹出动画功能。如果我在动画完成之前关闭弹出窗口，然后再次打开弹出窗口，我会看到元素已经可见。在v1 mobileHA中，可以完全破坏元素上的任何变换值，这就是为什么会出现跳转。您也不能在V1中使用

transform

属性，您需要将各种

translateX

和

translateY

属性组合使用-但是如果您添加它们并对它们使用强制进给（值

[“50%”，50%”）

然后它会复制css，甚至在移动设备上也会工作。mobileHA:false可以工作，但会引入新问题。我对弹出动画有完整的功能。如果在动画完成之前关闭弹出窗口，然后再次打开弹出窗口，我会看到元素已经可见。在v1中，mobileHA可以完全破坏您拥有的任何转换值首先是元素上的e-这就是为什么会出现跳转。您也不能在V1中使用

transform

属性，您需要组合使用各种

translateX

和

translateY

属性-但是如果您添加它们并对它们使用强制进给（值

[“50%”，50%”）

那么它将复制css，甚至可以在移动设备上工作。