iPhone Safari（反应式）上的过渡发生得太快了

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问题。提前谢谢了。