Assigning ScrollTo value cause unexpected flickering/blinking on iOS devices

Question

We recently worked on an auto-scrolling while freely swipeable component using React.js. The implementation idea is inspired by this article

And we've made something like this in React:

import React, { Component } from "react";
import PropTypes from "prop-types";
import "./AutoScroller.css";

const NUM_OF_CLONES = 10;
const AUTO_SCROLL_OFFSET = 1; // min offset of scrollTo is 1
const AUTO_SCROLL_INTERVAL = 32; // 1000 ms / 30 fps

export default class AutoScroller extends Component {
  static propTypes = {
    contents: PropTypes.array.isRequired,
    itemWidth: PropTypes.number.isRequired,
    numsOfItemsPerScreen: PropTypes.number.isRequired
  };

  constructor(props) {
    super(props);
    this.autoScrollerRef = React.createRef();
    this.currentPosition = 0;
    this.autoScrollTimer = null;
    this.scrollingTimer = null;

    /* boolean status */
    this.isTouch = false;
    this.isScrolling = false;
  }

  componentDidMount() {
    this.startAutoScroll();
    this.autoScrollerRef.current.addEventListener(
      "touchstart",
      this.touchStartHandler
    );
    this.autoScrollerRef.current.addEventListener(
      "touchend",
      this.touchEndHandler
    );
    this.autoScrollerRef.current.addEventListener("scroll", this.scrollHandler);
    this.autoScrollerRef.current.addEventListener(
      "contextmenu",
      this.contextMenuHandler
    );
  }

  componentWillUnmount() {
    this.clearAutoScroll();
    this.clearScrollingTimer();
    this.autoScrollerRef.current.removeEventListener(
      "touchstart",
      this.touchStartHandler
    );
    this.autoScrollerRef.current.removeEventListener(
      "touchend",
      this.touchEndHandler
    );
    this.autoScrollerRef.current.removeEventListener(
      "scroll",
      this.scrollHandler
    );
    this.autoScrollerRef.current.removeEventListener(
      "contextmenu",
      this.contextMenuHandler
    );
  }

  touchStartHandler = () => {
    this.isTouch = true;
    this.clearAutoScroll();
  };

  touchEndHandler = () => {
    this.isTouch = false;
    if (!this.isScrolling) {
      this.currentPosition = this.autoScrollerRef.current.scrollLeft;
      this.startAutoScroll();
    }
  };

  scrollHandler = () => {
    const {
      contents: { length },
      itemWidth
    } = this.props;
    this.isScrolling = true;
    this.currentPosition = this.autoScrollerRef.current.scrollLeft;

    const maxOffset = length * itemWidth;
    if (this.currentPosition > maxOffset) {
      const offset = this.currentPosition - maxOffset;
      this.autoScrollerRef.current.scrollTo(offset, 0);
      this.currentPosition = offset;
    } else if (this.currentPosition <= 0) {
      const offset = this.currentPosition + maxOffset;
      this.autoScrollerRef.current.scrollTo(offset, 0);
      this.currentPosition = offset;
    }

    /***
     * note: there will be only one timer, and the timer is only created by the very last scroll
     * only when the scroll event is not triggered anymore, the timer starts to get executed.
     */
    if (this.scrollingTimer) {
      clearTimeout(this.scrollingTimer);
    }

    this.scrollingTimer = setTimeout(() => {
      this.isScrolling = false;
      /***
       * note: resume auto-scroll when the momentum scroll (after finger leaves) stalls the scroll
       */
      if (!this.isTouch) {
        this.startAutoScroll();
      }
    }, 300);
  };

  contextMenuHandler = (event) => {
    event.preventDefault();
  };

  startAutoScroll = () => {
    if (!this.autoScrollTimer) {
      this.autoScrollTimer = setInterval(this.autoScroll, AUTO_SCROLL_INTERVAL);
    }
  };

  clearAutoScroll = () => {
    if (this.autoScrollTimer) {
      clearInterval(this.autoScrollTimer);
      this.autoScrollTimer = null;
    }
  };

  clearScrollingTimer = () => {
    if (this.scrollingTimer) {
      clearTimeout(this.scrollingTimer);
      this.scrollingTimer = null;
    }
  };

  autoScroll = () => {
    const {
      contents: { length },
      itemWidth,
      numsOfItemsPerScreen
    } = this.props;
    if (this.currentPosition < 0) {
      this.currentPosition = 0;
    }

    if (length > numsOfItemsPerScreen) {
      const position = this.currentPosition + AUTO_SCROLL_OFFSET;
      this.autoScrollerRef.current.scrollTo(position, 0);
      const maxOffset = length * itemWidth;
      if (this.currentPosition > maxOffset) {
        const offset = this.currentPosition - maxOffset;
        this.autoScrollerRef.current.scrollTo(offset, 0);
        this.currentPosition = offset;
      } else {
        this.currentPosition = position;
      }
    }
  };

  getWrappedData = () => {
    const { contents } = this.props;
    const { length } = contents;
    const numberOfClones = length < NUM_OF_CLONES ? length : NUM_OF_CLONES;
    return [...contents, ...contents.slice(0, numberOfClones)];
  };

  render() {
    const { itemGap, lineHeight } = this.props;
    return (
      <div className="auto-scroller" ref={this.autoScrollerRef}>
        <ul>
          {this.getWrappedData().map((content, index) => (
            <Item
              key={`auto-scroller-item-${index}`}
              content={content}
              itemGap={itemGap}
              lineHeight={lineHeight}
            />
          ))}
        </ul>
      </div>
    );
  }
}

class Item extends Component {
  static propTypes = {
    content: PropTypes.object.isRequired,
    itemGap: PropTypes.number,
    lineHeight: PropTypes.number
  };

  render() {
    const { content, itemGap = 10 } = this.props;
    return (
      <li
        className="auto-scroller__item"
        style={{ paddingRight: `${itemGap}px` }}
      >
        <div className="auto-scroller__item__content">
          <img draggable={false} src={content.imgUrl} />
          <div className="auto-scroller__item__content__title">
            {content.title}
          </div>
        </div>
      </li>
    );
  }
}

You can test with the demo from PlayCode (source code). Just open the link with Safari on the iPhone.

What I observed was every time when it was on the boundary cases, the image started to flicker. Further, if you swipe it with your finger forth and back on that point, the whole UI started to flicker. (see this screen recording) However, we didn't spot this glitch on Android devices.

Any possible solutions are welcome. Does anyone encounter something like this before?

Answer 1

removing overflow-y: hidden; and overflow-x: auto; from autoscroller.css solved it on my end.

another solution would be to add z-index: 1; and scroll-behavior: smooth; to .auto-scroller

let me know if it worked!