Переходы происходят слишком быстро на iPhone Safari (React)

Question

У меня есть приложение React с нижним колонтитулом на мобильном устройстве.Все отлично работает на рабочем столе, но когда я захожу на сайт на моем iPhone, нижний колонтитул вставляется так быстро, что почти мгновенно.Я работаю с Gatsby, который для меня автоматически префиксируется, поэтому добавлен webkit-transition.

Я также использую стилизованные компоненты только для справки.

Вот код:

Нижний колонтитул:

const FooterOuter = styled.footer`
    background: ${colors.grey_light};
    margin-top: 3rem;
    height: 12rem;
    transition: transform .3s;
    transform: translateY(12rem);
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;


    ${media.phone`
    position: fixed;
    background: ${colors.grey_light};

    z-index: 16;
    bottom: 0px;
    left: 0px;  
    transform: ${props => props.showing ? "translateY(4rem)" : "translateY(20rem)"};

    opacity: 1;
    `}
`




const Footer = ({showing}) => {

    return (
        <FooterOuter showing={showing}></FooterOuter>
    )
} 

и родительский компонент:

class ContainerComp extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showing: false,
    }
  }

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll)
    const body = document.querySelector('body')

    if(body.scrollHeight <= document.documentElement.clientHeight){
        this.setState({
            showing: true
        })
    }
  }

  handleScroll = () => {
    if (window.innerWidth <= 900) {
        if (document.body.getBoundingClientRect().top < 0) {
            this.setState({
                showing: true
            })
        } else {
            this.setState({
                showing: false
            })

        }
    } else {
        this.setState({
            showing: true
        })
    }



  }

  render() {
    return (
      <Container>
        <Header showing={this.state.showing} />
        {this.props.children}
        <Footer showing={this.state.showing} />
      </Container>
    )
  }
}

Как я уже говорил, в моем браузере на настольном компьютере это работает просто отлично, а размеры на мобильных устройствах правильные.Проблема заключается в том, что переход занимает менее 0,3 секунды.Раньше у меня было «облегчение» переходов, чтобы попытаться помочь с этой проблемой, но я не играл в кости.Было бы здорово узнать, делаю ли я что-то по большей части неправильно или это проблема React.Спасибо заранее.