I try to prevent hold drag when animation content to left is running so the animation not stuck using touch-action, but when i test in IOS 14 Webview, touch-action seem not working properly. Any insight?
.wrapper {
position: relative;
width: 300px
height: 100vh;
}
.content-box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 500px;
background: green;
animation: ctl-noTouch 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes ctl-noTouch {
0% {
transform: translateX(40px);
touch-action: none;
}
99% {
transform: translateX(0px);
touch-action: none;
}
100% {
transform: translateX(0px);
touch-action: auto;
}
}<div class='wrapper'>
<div class='content-box'>
Content to left
</div>
</div>