Z axys not working on mobile

[CKGrafico]

I've a similar example as the original atroposjs website but adding this css to all the elements inside the container:

touch-action: none;
    z-index: 1;
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;

Works perfect on a desktop device but in my phone the Z axys is changing randomly, if I change the html elements order nothing changes, is always pulling this shadow to the top.

<atropos class="position-island" :shadow="false" :highlight="false">
    <img
      class="position-island__image"
      draggable="false"
      src="~/assets/images/positions/island-shadow.png"
      alt="shadow"
      data-atropos-offset="-5"
    />

   <img
      class="position-island__image position-island__image--foreground"
      draggable="false"
      src="~/assets/images/positions/island.png"
      alt="island"
      data-atropos-offset="8"
    />

    ....
  </atropos>

or

<atropos class="position-island" :shadow="false" :highlight="false">
    ...

   <img
      class="position-island__image position-island__image--foreground"
      draggable="false"
      src="~/assets/images/positions/island.png"
      alt="island"
      data-atropos-offset="8"
    />

  <img
        class="position-island__image"
        draggable="false"
        src="~/assets/images/positions/island-shadow.png"
        alt="shadow"
        data-atropos-offset="-5"
      />

  </atropos>

[CKGrafico]

I'm really confused.. this is happening only in mobile and is related to data-atropos-offset the background layer SHOULD have a bigger number than the foreground layer, I've expected the opposite :(