Pan event trubbel in Google chrome and Opera

[develoNiklas]

The pan event is having trubble in Google Chrome. I get to drag once then i cant drag again. But when i click outside of the event area it resets. I have no problems in firefox or vivaldi, so this seems to bee a chrome spesific issue. Looks lie chrome is blocking the my code from running.

I have tried my best to figure out the problem but, have so far come up empty.

E4lOeVqxwm.mp4

my code if it is of any help. The event is attatched to the overlay near the bottom
`<script>
import { carousel } from "$src/lib/carousel";
import { isInViewport } from "$src/lib/Animate";
import Hero from './CardCarouelHero.svelte';
import {Motion} from "svelte-motion";
export let data = {};

var carouselHelper = new carousel();
var backgroundColor = JSON.parse(data.properties.backgroundColor.value);

let carouselElement,carouselverlay,filterLeft,filterRight,carouselDiameter,filterWidth;

let cards = [];
let cardMargin = data.properties.cardMargin.value ? data.properties.cardMargin.value  : 180;
let cardWidth = 280;
let totalCardWidth = cardWidth + cardMargin;


let theta =  2 * Math.PI / data.properties.cards.value.length;
let currImage = 10;

//wait for all bindings to compleete
setTimeout(function(){
    carouselDiameter = carouselHelper.getCarouselDiameter(totalCardWidth * cards.length);
    carouselHelper.setCardRotations(cards,totalCardWidth);
    carouselHelper.setFilterColor(filterLeft, filterRight,backgroundColor.colorcode)
    filterWidth = carouselDiameter / 2   + 'px'
    filterLeft.style.width = filterWidth
    filterRight.style.width = filterWidth
    carouselElement.style.transformOrigin = carouselHelper.getTransformOrigin(totalCardWidth , cards.length)
    carouselElement.parentElement.style.perspective = carouselDiameter * 3 + 'px'
    currImage =  cards.length;
    carouselElement.style.transform = '' + carouselHelper.getCarouselRotationInRad(currImage,theta );
  
}, 150)


let hasAnimated = false;
document.addEventListener('scroll', function(){
    if(carouselElement){
        if(isInViewport(carouselElement) && !hasAnimated){
            currImage = cards.length;
            let prevDuration =  carouselElement.style.transitionDuration;
            carouselElement.style.transitionDuration = '5s'
            carouselElement.style.transform = '' + carouselHelper.getCarouselRotationInRad(currImage,theta );
            carouselElement.style.transitionDuration = prevDuration
            hasAnimated = true;
        }
    }
})


const largeswipetreshold = 50;
const smallswipetreshold = 10;
const swipeTimeoutTime = 100;
let isTimedOut = false;

function timeoutCarousel(){
    if(!isTimedOut){
        isTimedOut = true;
        setTimeout(() => isTimedOut = false, swipeTimeoutTime)
    }
}

function handleMotion(e, info){
    if(info.delta.x < -largeswipetreshold){
        swipe('right')
    }else if(info.delta.x > largeswipetreshold){
        swipe('left')
    }else if(info.delta.x < -smallswipetreshold){
        if(!isTimedOut){
            timeoutCarousel()
            swipe('right')
        }
    }else if(info.delta.x > smallswipetreshold){
        if(!isTimedOut){
            timeoutCarousel()
            swipe('left')
        }
    }
    carouselElement.click()
}

function swipe(direction) {
    if (direction === 'right') {
        currImage++;
    }
    else {
        currImage--;
    }
    carouselElement.style.transform = '' + carouselHelper.getCarouselRotationInRad(currImage,theta );
}
function openCard(){
    console.log('asdf')
}

</script>

        <div class="container-wide">
            <div class="text-center py-24 container-slim">
                <h2 style="color: var({backgroundColor.contrastcolor.variabelname})">{data.properties.carouselTitle.value}</h2>
                <div style="color: var({backgroundColor.contrastcolor.variabelname})" class="big-text">
                    {data.properties.carouselIntro.value}
                </div>
            </div>
            
            <div class="carousel-container">
            

                <div class="carousel" bind:this={carouselElement}>
                    {#each data.properties.cards.value as card, index}
                       <div class="carousel-card-container" bind:this={cards[index]} on:click{openCard}>
                        <div class="carousel-card-inner">
                            <div class="carousel-card" style="background-color: var({backgroundColor.variablename})">
                                <img src="{apiUrl + card.properties.image.value.crops['4:5']}"> 
                                <div class="carousel-card-content">
                                    <h3>{card.properties.topText.value}</h3>
                                    <h3>{card.properties.bottomText.value}</h3>
                                </div>
                                <div class="carousel-card-filter"></div>
                            </div>
                        </div>
                       </div>
                    {/each}    
                </div>
            </div>
        </div>
        <div class="carousel-filter" bind:this={carouselverlay}>
            <Motion onPan={handleMotion} let:motion>
                <div class="carousel-filter-container" use:motion >
                    <div class="carousel-filter-left"   bind:this={filterLeft}  ></div>
                    <div class="carousel-filter-right"  bind:this={filterRight} ></div>
                </div>
            </Motion>
   
        </div>


</div>

`

[develoNiklas]

I managed to solve my problem. It cours when i drag from one div into another. Making it so that there is only one element in the draging area fixes the issue