CSS не обновляется на мобильном телефоне

Question

Я создаю диаграмму навыков в компоненте React, где каждый столбец начинается с короткой ширины, а затем расширяется до указанной ширины через 0,5 секунды. Ширина зависит от уровня навыка, определенного в следующем массиве:

const skills = [
  { skillName: 'JavaScript', level: 10, color: 'bca538' },
  { skillName: 'HTML', level: 9, color: 'af4336' },
  { skillName: 'CSS', level: 9, color: '2f81b7' },
]

Диаграмма представлена ​​в следующем коде:

<div className="chart__bars">
  {skills.map((skill, index) => {
    const { skillName, level, color } = skill
    const { scale } = this.state

    return (
      <div
        className={'chart__bars__item'}
        key={skillName}
        style={{
          background: `#${color}`,
          height: `${(100 / skills.length) * (index + 1)}%`,
          width: `${scale ? level * 10 : 30}%`,
          zIndex: skills.length - index,
        }}
      >
        <h4
          style={{
            opacity: `${scale ? 1 : 0}`,
          }}
        >
          {skillName}
        </h4>
      </div>
    )
  })}
</div>

После того, как компонент смонтирован, он вызывает изменение состояния через 0,5 секунды, что должно затем развернуть каждую полосу (логика для этого находится внутри свойства style в приведенном выше коде). Вот начальное состояние:

state = {
  scale: false,
}

И вот где я это изменяю:

componentDidMount() {
  setInterval(() => {
    this.setState({ scale: true })
  }, 500)
}

Отлично работает в браузере, но не на мобильном телефоне. Используя devtools, я вижу, что ширина обновляется, но она не увеличивается. Если я снимаю флажок ширины, а затем снова проверяю его, ширина увеличивается (что должно произойти автоматически).

Рабочий пример есть на моем сайте: https://marcelcruz.io.

Любые мысли приветствуются! Спасибо.