Imagem do carrossel distorcida

Olá pessoal. Implementei um carrossel com 2 slides, cada um com 3 imagens dentro. No android as imagens se comportam como o esperado, sem estourar os pixels. Mas no IOS, nos navegadores Safari e Chrome, as imagens aparecem distorcidas. Alguém sabe o que pode está acontecendo, onde estou errando no código ou pode me dar uma ajuda com isso, Por favor? Desde já agradeço.

Tecnologias:

• Bootstrap
• CSS
• HTML

Segue trecho do código:

CSS

#carouselID {
    background: url("imagemBG.png");
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 80%;
    width: 100vw;
    height: 100%;
}

.carousel {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 85%;
    height: 12%;
}

.carousel-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 95%;
    padding: 1%;
}

.carousel-item {
    padding: 1% 2%;
    position: absolute;
    padding: 1%;
}

#iconsRow {
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin: 0;
}

.col-xs-4:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    height: 100%;
    transform: scale(.95, .95);
}

HTML

<section id="carouselID">
  <div id="carouselBanner" class="carousel slide" data-ride="carousel" data-interval="3000">
    <div class="carousel-inner">

      <div class="carousel-item active">
        <div class="row" id="iconsRow">
          <div class="col-xs-4">
            <a href="#"_blank"><img src="image1.png" class="d-block w-100" alt=""></a>
          </div>
          <div class="col-xs-4">
            <a href="#" target="_blank"><img src="image2.png" class="d-block w-100" alt=""></a>
          </div>
          <div class="col-xs-4">
            <a href="#" target="_blank"><img src="image3.png" class="d-block w-100" alt=""></a>
          </div>
        </div>
      </div>

      <div class="carousel-item">
        <div class="row" id="iconsRow">
          <div class="col-xs-4">
            <a href="#" target="_blank"><img src="image5.png" class="d-block w-100" alt=""></a>
          </div>
          <div class="col-xs-4">
            <a href="#" target="_blank"><img src="image5.png" class="d-block w-100" alt=""></a>
          </div>
          <div class="col-xs-4">
            <a href="#" target="_blank"><img src="image5.png" class="d-block w-100" alt=""></a>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

PS: Seguindo o conceito de mobile-first