Chrome Mobile не обновляет стили CSS должным образом

Question

Я хочу сделать фиксированный позиционируемый липкий элемент, который прилипает к нижней части страницы при прокрутке страницы вверх.

Работает нормально на настольном браузере Chrome, но не на мобильном. Не могу найти точную проблему. Это ошибка Chrome, мой код неверен?

class App extends React.Component {
    state = {
        position: 0
    }

    componentDidMount() {
       window.addEventListener('scroll', this.handleScroll);
    }


    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    handleScroll = () => {
        const {scrollTop, scrollHeight} = document.documentElement;
        const scroll = scrollHeight - scrollTop - window.innerHeight;
        if (scroll <= 100) {
            this.setState({position: 100 - scroll});
        } else if (this.state.position !== 0) {
            this.setState({position: 0});
        }

    }

    render() {
        return (
             <section>
                 <div className="box" style={{
                    bottom: this.state.position
                 }}>
                   STICKY BOX
                </div>
             </section>
        );
    }
}

Вот ручка: Codepen