translate3d makes element jump

I use transform's translate3d to center the popup div in a container.

//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"});
    });

In desktop browsers, it works fine but in mobile browser, it jumps. When user clicks on a button the popup div gets opacity value 1 and display property to block from JavaScript. It gets displayed below and to the left of the supposed position then get moved to actual position.

I tried applying the following snippet for improvement as suggested in many posts here in Stackoverflow but no success.

-webkit-backface-visibility: hidden;

Clicking on close button on popup container is handled with the following function.

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

I reset the animation with below code.

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);
        }

    }

That's using Velocity v1 - which isn't the best thing where transform is concerned, as on mobile devices it attempts to mess around with the transform property itself, and I've got a feeling that's happening here. At the least try adding the option mobileHA: false to it and see if that helps.

Failing that, maybe have a look at trying with the Velocity v2 beta (check the github page for details), display becomes a property instead of an option, but there's (currently) no mobile hardware acceleration on it (mobile devices and browsers have improved since then) - and it'll leave your properties alone - it is still in beta while I'm ironing out some bugs and ensuring it is good enough quality though!