Safari中的字幕动画

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

编辑：我使用相同的CSS进行了单独的HTML标记，并且效果很好。因此，我认为问题与从数据库中获取数据并将其呈现给组件有关

编辑：通过向动画时间添加1秒的延迟，我似乎获得了一些成功。我猜这给了组件时间来获取代码并渲染动画。