Исправлено мерцание нижней панели div (кнопка «Позвонить сейчас») с позицией CSS: исправлено

Мое дорогое сообщество. Я только что вернулся к некоторому кодированию html / css после паузы в несколько лет (если быть точным, 10). На самом деле, мое основное внимание всегда было сосредоточено на php, поэтому я никогда не был профессионалом в области разметки. Короче говоря: я перестраиваю веб-сайт моего родителя, для чего я использовал HTML-шаблон themeforest, чтобы адаптировать его (без WP! Он называется «Porto» от Themeforest). И очень прошу помощи...

Я не могу исправить следующее:

Цель: если пользователь заходит на наш сайт со своего мобильного телефона, внизу экрана должна постоянно отображаться полоса «Позвоните нам сейчас» во всю ширину экрана. В нем должно быть две ссылки, одна ссылка на номер телефона, а вторая на «Вариант обратного звонка».

Это так просто. Постоянно фиксированный элемент div, отображаемый в нижней части экрана (как известное предупреждение GDPR о файлах cookie). Но, к сожалению, это не работает.

Я создал два div с "position:fixed;" и "bottom:0;", по одному для каждой ссылки и каждой ширины 50% экрана.

.mobileShow1 {
  display: none;
}
.mobileShow2 {
  display: none;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .mobileShow1 {
    display: block;
    width: 50%;
    position: fixed;
    bottom:0;
    left: 0;
    min-height:50px;
    margin: 0 0 0 0;
    background-color:#47648B;
    font-size:20px;
  }
  .mobileShow2 {
    display: block;
    width: 50%;
    position: fixed;
    bottom:0;
    left: 50%;
    min-height:50px;
    margin: 0 0 0 0;
    background-color:#47648B;
    font-size:20px;
  } 
}

И дивы:

<div class="mobileShow1"><div style="margin-left:15%; padding-top:5%;"><a href="tel:+49000000"><i class="icon-phone icons"></i> Call Us</a></div></div><div class="mobileShow2"><div style="margin-left:3%; padding-top:5%;"><a href="/"><i class="icon-call-in icons"></i> Callback-Service</a></div></div>

В принципе, это работает идеально. Я попробовал его на своем iPhone X, и он работал без сбоев. Тем не менее, на «старых» iPhone (iPhone 8, iPhone SE) нижняя панель ужасно мерцает. Я потратил более 6 часов на отладку, но не могу исправить. Это определенно из-за "bottom:0;" ценность. Если изменить на "top:0;" работает нормально; но - представляешь - планка сверху. У меня не было возможности постоянно держать полосу внизу без мерцания.

Я обнаружил, что проблемы с графическим процессором/производительность графического процессора могут быть одной из причин мерцания. Поскольку шаблон сайта использует довольно много Javascript, а мерцание чаще происходит на сайтах с небольшим количеством картинок и слайдеров, это звучит вполне вероятно. Но я не могу (и не буду) согласиться с тем, что невозможно убрать панель div в нижней части экрана iPhone только потому, что загружен какой-то Javascript... Я с трудом могу понять, почему он работает идеально со значением "top:0;" установлен, но если он изменится на "bottom:0;" мерцание начинается снова. Почему такая огромная разница для графического процессора?

   -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(0) ;
    transform-style:preserve-3d;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition   : none !important;
    -ms-transition: none !important;
    transition: none !important;
    -webkit-overflow-scrolling:touch;
    z-index:9990;
-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);