In tablet mode, first picture of the slide is being cut. As soon as I move to next slide, it gets corrected.

[belfortf]

Hi,

This happens only in tablet mode, desktop and mobile are working fine. The first picture of the slide is being cut on the left. Please review the following picture.

<ul class="splide__list" id="main-carousel-list" role="presentation" style="transform: translateX(-992px);">

As soon as I move the slide, the images get correct again, and if I move back to the first slide, splide__list looks like this:

<ul class="splide__list" id="main-carousel-list" role="presentation" style="transform: translateX(-977px);">

So, it seems this 15px difference is causing this behaviour. I don't understand why this exactly is happening, is it a bug or is it something obvious I'm missing? Any help is appreciated. Thank you

[belfortf]

Expanding on my question:

My structure is the following

<div class="flex-container">
      <div class="col-lg-6 fixed-left">
        <div class="cs-height_100 cs-height_lg_10"></div>
        <Carousel :slides="product.assets" />
      </div>
      <div class="col-lg-6 relative-right">.....</div>
 </div>

The splide part of the page is fixed and the right part of the page with the product information is relative, so that it can scroll down while the images stay fixed. It seems that this messes splide up.

.fixed-left {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    
    /* background-color: #fff;  */
    
  }


  .relative-right {
    position: relative;
    padding-left: 20px;
  } 

  .flex-container {
    display: flex;
    flex-direction: row-reverse;
  
  } 

Still any ideas about how to fix it would be appreciated.