Анимированный текст исчезает в Safari. Перекрасить / Перерисовать ошибку?

Question

Я работаю над этим сайтом, где текст анимируется так же, как новостная лента. Анимация выполняется с помощью CSS и активируется переключением класса через Javascript.

Все работает так, как задумано в Chrome, Firefox и IE, но движущиеся элементы иногда исчезают в Safari. Это кажется очень случайным, так как иногда это работает отлично в Safari, а в других случаях весь текст внезапно исчезает.

Я пробовал много вещей, таких как замена текста на SVG, относительное позиционирование элементов вместо абсолютного, перемещение "левой" позиции вместо использования трансляционного преобразования и многое другое. Ничто не решает проблему.

Я читал, что это может быть проблема перерисовки webkit, но проблема сохраняется даже после использования трюка для перерисовки.

Вот скриншот, который показывает проблему.

Вот ссылка на сайт: http://staging-cb-minisite.matthiasdeckx.be/

Включен большая часть кода, относящегося к анимированным баннерам.

Заранее спасибо.

$('.c-ticker--header').addClass('js-banner-header-animation');
$('.c-ticker--banner--1').addClass('js-banner-1-animation');
$('.c-ticker--banner--2').addClass('js-banner-2-animation');
$('.c-ticker--banner--3').addClass('js-banner-3-animation');

setTimeout(function() {

  if (ww >= brMedium) {
    $('.c-ticker--banner--1').css({
      '-webkit-animation-play-state': 'paused'
    });
    $('.c-ticker--banner--1').css({
      'animation-play-state': 'paused'
    });
    $('.c-ticker--banner--2').css({
      '-webkit-animation-play-state': 'paused'
    });
    $('.c-ticker--banner--2').css({
      'animation-play-state': 'paused'
    });
    $('.c-ticker--banner--3').css({
      '-webkit-animation-play-state': 'paused'
    });
    $('.c-ticker--banner--3').css({
      'animation-play-state': 'paused'
    });

    $('.js-banner-1-animation').hover(
      function() {
        $(this).css({
          '-webkit-animation-play-state': 'running'
        });
        $(this).css({
          'animation-play-state': 'running'
        });
        main.initRepaint();
      },
      function() {
        $(this).css({
          '-webkit-animation-play-state': 'paused'
        });
        $(this).css({
          'animation-play-state': 'paused'
        });
        main.initRepaint();
      }
    );

    $('.js-banner-2-animation').hover(
      function() {
        $(this).css({
          '-webkit-animation-play-state': 'running'
        });
        $(this).css({
          'animation-play-state': 'running'
        });
        main.initRepaint();
      },
      function() {
        $(this).css({
          '-webkit-animation-play-state': 'paused'
        });
        $(this).css({
          'animation-play-state': 'paused'
        });
        main.initRepaint();
      }
    );

    $('.js-banner-3-animation').hover(
      function() {
        $(this).css({
          '-webkit-animation-play-state': 'running'
        });
        $(this).css({
          'animation-play-state': 'running'
        });
        main.initRepaint();
      },
      function() {
        $(this).css({
          '-webkit-animation-play-state': 'paused'
        });
        $(this).css({
          'animation-play-state': 'paused'
        });
        main.initRepaint();
      }
    );
  }

}, 100);

.c-ticker {
  display: block;
  box-sizing: border-box;
  @include clear();
  white-space: nowrap;
  z-index: 4;
}

.c-ticker--header {
  .c-ticker__item {
    height: $large_items-size;
    line-height: $large_items-size;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    @include mq($br-medium) {
      height: $small_items-size !important;
      line-height: $small_items-size !important;
    }
  }
}

.c-ticker--banner {
  .c-ticker__item {
    height: $large_banners-size !important;
    line-height: 26.5vh !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    display: inline-block;
    box-sizing: border-box;
    @include mq($br-medium) {
      height: $small_banners-size !important;
      line-height: 14.55vh !important;
    }
  }
}

.o-banner {
  position: relative;
  overflow: visible;
  width: 100%;
  height: $large_banners-size;
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: nowrap;
  @include sans--xlarge();
  @include mq($br-medium) {
    height: $small_banners-size;
  }
}

.o-banner--borders {
  border-bottom: 1px solid $white;
}

.o-banner--borders:first-of-type {
  border-top: 1px solid $white;
}

.o-banner__title {
  display: block;
  position: absolute;
  width: auto;
  height: 100%;
  white-space: nowrap;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.o-banner__title--text-border {
  -webkit-text-fill-color: $black;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $white;
}

#banner-ticker-1,
#banner-ticker-3 {
  right: -20%;
  cursor: e-resize;
}

#banner-ticker-2 {
  left: -20%;
  cursor: w-resize;
}

.js-banner-1-animation {
  -webkit-animation-name: tickerBannerOne;
  animation-name: tickerBannerOne;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 120s;
  animation-duration: 120s;
}

.js-banner-header-animation {
  -webkit-animation-name: tickerHeader;
  animation-name: tickerHeader;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 120s;
  animation-duration: 120s;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  &:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}

.js-banner-2-animation {
  -webkit-animation-name: tickerBannerTwo;
  animation-name: tickerBannerTwo;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 90s;
  animation-duration: 90s;
}

.js-banner-3-animation {
  -webkit-animation-name: tickerBannerThree;
  animation-name: tickerBannerThree;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 90s;
  animation-duration: 90s;
}

<div class="o-banner o-banner--borders o-banner--ticker ">
  <div id="banner-ticker-1" class="c-ticker c-ticker--banner c-ticker--banner--1 o-banner__title o-banner__title--text-border">
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
    <span class="c-ticker__item">35 years of creative clubbing</span>
  </div>
</div>

<div class="o-banner o-banner--borders o-banner--ticker ">
  <div id="banner-ticker-2" class="c-ticker c-ticker--banner c-ticker--banner--2 o-banner__title">
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
    <span class="c-ticker__item">Creative Belgium Awards</span>
  </div>
</div>

<div class="o-banner o-banner--borders o-banner--ticker ">
  <div id="banner-ticker-3" class="c-ticker c-ticker--banner c-ticker--banner--3 o-banner__title  o-banner__title--text-border">
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
    <span class="c-ticker__item">01.06.18 Casino Knokke</span>
  </div>
</div>