css animation not working in chrome (delay not respected on webkit mobile)

I’m trying to animate a div with a translate3D, it’s working perfectly everywhere except on webkit-mobile where the property is well interpreted but the div goes directly to the endpoint without any delay.

I tried to use the webkit transition property without any difference and the debugger is telling me that everything should work.

Please tell me you know how to solve this

JS duration is around 1000ms

function setTransform(x, y, deg, duration) {
    current.style.transform = `translate3d(${x}px, ${y}px, 0) rotate(${deg}deg)`
    likeText.style.opacity = Math.abs((x / innerWidth * 2.1))
    likeText.className = `is-like ${x > 0 ? 'like' : 'nope'}`
    if (duration) {
      current.style.transition = `transform ${duration}ms`
      current.style.webkitTransition = `transform ${duration}ms`
      // debugger;
    }
}

CSS of the “current” element

.card {
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #f1f1f1;
    border-radius: 10px;
    user-select: none;
    cursor: pointer;
    overflow-y: scroll;
    touch-action: none;
    flex-direction: column;
}