Фоновые изображения слайдера выглядят ужасно на iPhone

Question

Я создал сайт WordPress с двумя ползунками - один отображается только на мобильном телефоне, а другой - на рабочем столе.Текущий соответствующий исходный код ползунка (только для мобильного дисплея):

<div data-id="91e39d5" class="elementor-element elementor-element-91e39d5 fixedbkg elementor-hidden-desktop elementor--v-position-top elementor--h-position-center elementor-widget elementor-widget-slides" data-element_type="slides.default">
                <div class="elementor-widget-container">
                    <div class="elementor-slides-wrapper elementor-slick-slider" dir="ltr">
            <div class="elementor-slides" data-slider_options="{&quot;slidesToShow&quot;:1,&quot;autoplaySpeed&quot;:3000,&quot;autoplay&quot;:true,&quot;infinite&quot;:true,&quot;pauseOnHover&quot;:false,&quot;speed&quot;:500,&quot;arrows&quot;:false,&quot;dots&quot;:false,&quot;rtl&quot;:false,&quot;fade&quot;:true}" data-animation="">
                <div class="elementor-repeater-item-c324989 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div></div></div></div><div class="elementor-repeater-item-a74ff24 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR><a href="#arrowscrollmob" style="color:white"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></a>
</div></div></div></div><div class="elementor-repeater-item-15a3089 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR><a href="#arrowscrollmob" style="color:white"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></a>
</div></div></div></div><div class="elementor-repeater-item-20784b4 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR><a href="#arrowscrollmob" style="color:white"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></a>
</div></div></div></div>            </div>
        </div>

Он также имеет следующий код CSS:

.elementor-1063 .elementor-element.elementor-element-da9971b .slick-slide-inner
{
    background-image: linear-gradient(to top, rgba(28,34,38,1) 0%,rgba(0,0,0,0) 70%) !important;

}

.elementor-1063 .elementor-element.elementor-element-fb358d5 .elementor-repeater-item-15a3089 .slick-slide-inner {
        background-image: linear-gradient(to top, rgba(28,34,38,1) 0%,rgba(0,0,0,0) 50%) !important;

}


.elementor-1063 .elementor-element.elementor-element-da9971b .elementor-slide-heading
{
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);

}
.elementor-1063 .elementor-element.elementor-element-fb358d5 .elementor-slide-heading
{
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);

}

.elementor-element .slick-slide-bg{
background-attachment:fixed;
background-position:center 85%;
}


@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
/*   background-image: url(); */
/*   background-size: contain; */
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

Ползунок выглядит отлично на всех дисплеях, кромемобильные телефоны iOS.Изменяющиеся фоновые изображения не выглядят хорошо на любом устройстве iPhone, которое использует Safari.

Вот примеры фоновых изображений с моего андроида:

И вот как это выглядит на любом iPhone, который мы проверили:

Я также попытался добавить следующий код в заголовок, и это не помогло:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Что мне делать дальше?