BKWLD / vue-ssr-carousel

A performance focused Vue carousel designed for SSR/SSG environments.
https://vue-ssr-carousel.netlify.app
MIT License
133 stars 16 forks source link

Problem on mobile view #90

Open Sebarkar opened 2 years ago

Sebarkar commented 2 years ago

Hi there. Got the problem with displaying on mobile view. When slide sometimes I getting unpredictable error.

Difference with working version and stucked that I found is activeSlides array.

Another slides on the page with same settings where simple image works perfect. But when slide products with a lot of code unpredictable stucks.

Dekstop view works perfect.

No error showing. Hapends in case using drag.

activeSlides:Array[0] dragging:false leftPeekingSlideIndex:undefined rightPeekingSlideIndex:undefined slideOrder:Array[10] 0:0 1:1 2:2 3:3 4:4 5:5 6:6 7:7 8:8 9:9 trackTranslateX:NaN allSlidesCount:10 clonedSlides:Array[0] hasClonedSlides:false inactiveSlides:Array[10] 0:0 1:1 2:2 3:3 4:4 5:5 6:6 7:7 8:8 9:9 styles:undefined uniqueSlidesCount:10

`<ssr-carousel show-dots overflow-visible :responsive="responsive" gutter="0" peek-right="20"

` Снимок экрана (16)

` data() {
return {
  responsive: [
    {
      maxWidth: 3000,
      slidesPerPage: 5,
    },
    {
      maxWidth: 1279,
      slidesPerPage: 4,
    },
    {
      maxWidth: 1024,
      slidesPerPage: 3,
    },
    {
      maxWidth: 767,
      slidesPerPage: 2,
    }
  ]
}

},`

Sebarkar commented 2 years ago

This bug in case when drag-and move outside screen.

Sebarkar commented 2 years ago

69176b59-10f6-4f67-ad39-a512ec13803b.webm

weotch commented 2 years ago

I couldn't reproduce this issue in Chrome using it's touch or non-touch modes. I also can't reproduce it on a hardware iPhone in Safari. Can you still repro it?

https://user-images.githubusercontent.com/77567/192053920-e7bb8f12-18fc-44b4-b517-73c6570d72d1.mov

Sebarkar commented 2 years ago

Yeah the same. On my mobile devices also in Chrome. In any Iphone or Android emulations. Its 100% hapends when you slowly draging to the end of left side screen and out.

fa759287-81fe-4e84-8269-7b9f723afcb2.webm

Sebarkar commented 2 years ago

On dekstop I never seen this bug. Just pick demension Any devices. Not responsive. new

weotch commented 2 years ago

Man I still can't repro. This is from Chrome on my iPhone.

https://user-images.githubusercontent.com/77567/192118674-0fbdc390-061c-4b61-a258-a669fbcb9509.MOV

Sebarkar commented 2 years ago

Just used clear Firefox on mobile, same...

https://user-images.githubusercontent.com/44950137/192127310-7555baa8-e239-4039-91cc-3af4827676df.mp4

And same mobile chrome, identical behavior. https://user-images.githubusercontent.com/44950137/192127485-d9b0a143-01f8-4545-a2a9-35dfa10fb62b.mp4

Sebarkar commented 2 years ago

I tried to show all manipulation. 22222hh.webm

javiBarrientos commented 1 year ago

Hi, i don't know if what i gonna say can be helpful but when i see your last video @Sebarkar all the index got "NaN". I'm working with this package and get the same error.