I’m using my own event listeners to pinch/zoom a div element inside <ion-content>. It works well when I open the app with Safari in my localhost, but when it is builded with Capacitor with XCode, it doesn’t.
I’ve looking in the Safari Dev Tools what is happening with Safari and with the deployed Capacitor IPA with WKWebView. It seems that IPA version the touch event is never triggered.
So, the effect desired is: log the touch/gesture event and move the div, as the doMovement function is called.
In Safari Browser and the Web Inspector, everything is ok and happens as it should be. But when is already in the iOS App version, doesn’t. What should I do to solve this inconsistency?
My code is like that:
<template>
<ion-page>
<ion-header></ion-header>
<ion-content>
<div ref="container">
<h1>Digite o título</h1>
<h2>Digite seu conteúdo aqui</h2>
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts" setup>
onMounted(() => {
const container = (getCurrentInstance() as any).ctx.$refs['container'];
container.addEventListener('touchstart', function(e:any){
console.log('touchstart', e)
doMovement(e)
})
container.addEventListener('touchmove', function (e:any) {
console.log('touchmove', e)
doMovement(e)
})
container.addEventListener('touchend', function (e:any){
console.log('touchend', e)
doMovement(e)
})
window.addEventListener("gesturestart", function (e:any) {
console.log('gesturestart', e);
doMovement(e)
});
window.addEventListener("gesturechange", function (e:any) {
console.log('gesturechange', e)
doMovement(e)
})
window.addEventListener("gestureend", function (e:any) {
console.log('gestureend', e)
doMovement(e)
});
})
</script>
What occurs on Safari:
What happen when it’s already built in Capacitor WKWebView:
