ios - iOS Safari/Chrome/Firefox 中的 CSS 关键帧动画闪烁/不同步

Question

我有一个带有 CSS 关键帧动画的 React 应用程序来更改文本的外观，并且正在使用 setState 和 setInterval 通过 JS 动态更改字体。

我同步关键帧动画以在调用 setInterval 的同时开始播放，并且在桌面版 Chrome/Safari 上一切正常。在 iOS 上的 Safari/Chrome/Firefox 上，动画闪烁，并且通常不同步。有趣的是，在 Safari 上，如果我在初始加载后刷新页面，一切都会正常工作。

我在这里通读了许多类似问题的线索，但没有一个解决方案对我有用。我尝试添加 -webkit-backface-visibility: hidden;, body {-webkit-transform:translate3d(0,0,0);}，并尝试在动画开始时添加延迟以抵消闪烁。没有任何效果。

这是一个实时链接:https://stoic-khorana-e0bd2c.netlify.com/

这是代码——它是一个很小的应用程序，基本上只是一个初始页面:https://github.com/themarquisdesheric/el4d/tree/master/src

我延迟了“AKA”的出现，然后又延迟了名称更改的开始。

SCSS:

.aka-container {
  .aka { 
    opacity: 0;
    animation: showAKA 400ms 750ms ease-out forwards;
  }

  .name-changer {
    animation: fade 1500ms infinite paused; 

    &.playing { animation-play-state: running; }
  }

}

@keyframes showAKA {
  20%,
  100% { opacity: 1; }
}

@keyframes fade {
  0% { opacity: 0; }
  20%,
  80% { opacity: 1; }
  100% { opacity: 0; }
}

这是 React 组件:

class NameChanger extends Component {
  state = {
    name: null,
    fontFamily: null,
    index: 0,
    playing: false
  };

  componentDidMount() {
    window.setInterval(this.changeName, 1500);
    this.setState({ playing: true });
  }

  changeFont = (index) => {
    switch (index) {
      case 0:
        return 'Sedgwick Ave Display';
      case 1:
        return 'Bangers';
      case 2:
        return 'Luckiest Guy';
      default:
        return 'Bangers';
    }
  };

  changeName = () => {
    const names = ['ol lightsy', 'eladi-da', 'el-40'];
    const { index } = this.state;
    const { changeFont } = this;

    this.setState(prevState => ({
      name: names[index],
      fontFamily: changeFont(index),
      index: (index === names.length - 1) 
        ? 0 
        : prevState.index + 1
    }));
  };

  render() {
    const { name, fontFamily, playing } = this.state;

    return (
      <span
        className={`name-changer ${playing ? 'playing' : ''}`} 
        style={{ 
          fontFamily,
          position: 'relative',
          top: (name === 'el-40') ? '.25rem' : ''
        }}
      >
        {name}
      </span>
    );
  }
}

我想知道为什么这在 Chrome 中运行良好，但在移动设备上却出现错误。预先感谢您的帮助!

Answer 1

事实证明iOS pauses timers如果它认为页面正在滚动/缩放。这适用于 iOS 上的 Safari、Chrome 和 Firefox。

我通过删除对 setInterval 的使用并改用 animationiteration 事件实现相同的效果来解决这个问题。显然，动画自己的计时器受到尊重，而像 setInterval 这样的计时器则不然。

class NameChanger extends Component {
  state = {
    name: null,
    fontFamily: null,
    index: 0,
    playing: false
  };

  componentDidMount() {
    const { span, changeName } = this;

    span.addEventListener('animationiteration', 
      () => changeName()
    );

    this.setState({ playing: true });
  }

  changeFont = (index) => {
    switch (index) {
      case 0:
        return 'Sedgwick Ave Display';
      case 1:
        return 'Bangers';
      case 2:
        return 'Luckiest Guy';
      default:
        return 'Bangers';
    }
  };

  changeName = () => {
    const names = ['ol lightsy', 'eladi-da', 'el-40', 'elautopilot'];
    const { index } = this.state;
    const { changeFont } = this;

    this.setState(prevState => ({
      name: names[index],
      fontFamily: changeFont(index),
      index: (index === names.length - 1) 
        ? 0 
        : prevState.index + 1
    }));
  };

  render() {
    const { name, fontFamily, playing } = this.state;

    return (
      <span
        className={`name-changer ${playing ? 'playing' : ''}`} 
        ref={span => this.span = span}
        style={{ 
          fontFamily,
          position: 'relative',
          top: (name === 'el-40') ? '.25rem' : ''
        }}
      >
        {name}
      </span>
    );
  }
}