z-index en determinados ipad

[AitorLopez]

Hola. Tengo el código que os pongo debajo. La idea es que dentro del div swiper-slide se muestre una imagen y encima de la imagen, el contenido que hay dentro del div datos-slide.

Esto funciona perfecto en todos los navegadores tanto de pc como de tablet como de movil, excepto en determinados ipad algo antiguos donde no respeta el z-index.

Alguno podría decirme como puedo solucionarlo. Gracias.

Código HTML:

<div class="swiper-slide">
    <img src="ruta-de-la-imagen" class="img-fluid img-swiper">
    <div class="datos-slide">
         <p class="rounded" style="background-color: #000000; opacity: 0.9; color: #ffffff; font-weight: bold;"><b>
                  <a href="#" class="text-white">Texto</a></b>
         </p>
         <small class="px-1 py-1" style="background-color: #000000; opacity: 0.6; color: #ffffff;">16-jul.-2018</small>
  </div>
</div>
 

Código CSS:

.swiper-slide {
      position: relative;
      overflow: hidden;
      text-align: center;
      font-size: 20px;
      background: transparent;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      z-index: 1;
    }
    
  .datos-slide{
    position: absolute;
    width: 300px;
    bottom: 0;
    z-index: 3;
    text-align: center;
    /*opacity: 0.6;*/
    color:#000000;
    /*background-color: #000000;*/
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  
  .datos-slide p, .datos-slide small{
    position: relative;
    z-index: 4;
  }
  
  img.img-swiper{
    width: 300px;
    height: 225px;
    position: relative;
    z-index: 2;
  }