I want to have a sidebar in stenciljs which is a webcomponent, which has another component inside of it. The sidebar should close when I swipe left on anywhere in it. In Chrome desktop view it works fine and on iOS too. But when I'm testing it on Chrome devtools Mobile or Chrome in Android it doesn't work anymore. Is there a workaround to enable the propagation again in mobile or is this a bug form Chrome?
Since I already searched I only found problems where stopPropagation is not working, but I want the exact opposite.
I tried the propagation-hammerjs eihter but it didn't do anything different for me.
const sidebarHammerController = Hammer(this.sidebar);
sidebarHammerController.on("swipeleft", (e) => {
this.toggleMenu(e);
});
Okay I did more research and i found out that my child component had overflow-y auto on. This had the effect, that pan-y was reserved for touchactions and didn't throw the swipe event. I had to turn on touch-action: pan-y, which allowed me to get swiping and scrolling.