Анимация Marquee в сафари

Question

Я пытаюсь воссоздать тег выделения с помощью CSS-анимации.Прекрасно работает в Chrome и Firefox, но по какой-то причине в Safari (12.0.1) анимация либо не воспроизводится, либо воспроизводится неправильно, пока я не переключу вкладки.

Вот мой CSS:

.marquee{
    width:100%;
    background-color:rgba(56, 38, 48, .8);
    white-space:nowrap;
    overflow:hidden;
    box-sizing:border-box;
    height:51px;
}

.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 120s linear -3s infinite;
    -webkit-animation: marquee 120s linear -3s infinite;
    color: white;
}

@-keyframes marquee {
    0%   { transform: translate(0,0); }
    100% { transform translate(-100%, 0); }
}

@-webkit-keyframes marquee {
    0%   { -webkit-transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); }
}

HTML: это приложение React.Перед монтированием компонента он выбирает группу тикеров и их значения, затем передает их в компонент, который их отображает:

componentWillMount(){
    const params = {
      method:'POST',
      body:'key=1234567',
      headers: {
        "Content-type":"application/x-www-form-urlencoded; charset=UTF-8"
      },
    }
    fetch('/tickers', params)
        .then(res => res.json())
        .then(data => {
          const tickers = Object.assign({}, data)
          this.setState({tickers})
          console.log(this.state.tickers)
        }
      )
        .catch(err => {
          console.log(`could not fetch: ${err}`)
        })

  }

Затем тикеры передаются в этот компонент, где применяется эффект выделения:

const Tickerbar = (props) => {
  const displayNameStyle = {
    color:'white',
  }

  const midStyle = {
    color:'#CDBFBF',
    marginRight:'20px'
  }

  const displayNames = Object.keys(props.tickers)
  const displayNameAndMid = displayNames.map(cusip => {
    return(
        <span key={cusip}>
          <span style={displayNameStyle}>
            <b>{cusip.split('/').join('.')}:</b>
          </span>

          <span style={midStyle}>
            <b>{(props.tickers[cusip]).toFixed(2)}</b>
          </span>
        </span>
  )
  })
  return(
    <div className="marquee">
      <p>
        {displayNameAndMid}
      </p>
    </div>
  )
}

Для справки, я использую macOS High Sierra 10.13.6

РЕДАКТИРОВАТЬ: я сделал отдельную HTML-разметку, используя тот же CSS, и он отлично работает.Поэтому я считаю, что проблема связана с получением данных из базы данных и их рендерингом в компонент

РЕДАКТИРОВАТЬ: мне кажется, что некоторый успех добавить, добавив задержку в 1 секунду ко времени анимации.Я предполагаю, что это дает компоненту время для выбора тикеров и рендеринга анимации.