Ytukyg

I'm trying to recreate a marquee tag using CSS animations. Works fine in Chrome and Firefox, but for some reason in Safari(12.0.1), the animation either won't play or won't play correctly until I switch tabs.

Here's my 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: This is a React application. Before the component mounts, it fetches a group of tickers and their values, then feeds them into a component that renders them:

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}`)

        })



  }

The tickers then get fed into this component where the marquee effect is being applied:

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>

  )

}

For reference, I am running macOS High Sierra 10.13.6

EDIT: I made a separate HTML markup using the same CSS, and it works fine. So I believe the problem has to do with getting the data from the database and rendering it to the component

EDIT: I seem to have some success adding by adding a 1 second delay to the animation time. I guess this gives the component time to fetch the tickers and render the animation.