White space appears between slides when swiping/navigating on mobile browsers

[vladimir-fsh]

On the demo page in any iPhone try to swipe or click on next arrow. Every time a next image will appear is empty for short time (~100ms).

[xiaolin]

I noticed that and it seems to only be happening on mobile browsers. I'm not sure whats going on there.

[vladimir-fsh]

Probably it happens cause nodes of slides removed and pushed again

[xiaolin]

If anyone finds the cause please reopen.

[Multi-Thinker]

+1 it also happen on the web. the translate property adds 0% 50% 100% and so on to every slide. removing the translate fix it for me. but its a buggy hack. wonder why the translate is pushing images down. instead of a row

[Goye]

I am getting the same behavior with the thumbnails, I noticed it is something related to the transform property that allows values upper the initial one. e.g transform: translate3d(15.0735px, 0px, 0px);

[xiaolin]

Did some debugging, and this looks to be an image loading issue on mobile browsers. The problem goes away when using the same images for all the slides. Will need further investigation to determine a solution...

cannot reproduce using same images e.g.

const images = [
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
];