侧边栏(ios设备)使用video标签全屏后 只能听见声音 不能看见画面

关闭侧边栏的时候 会看到全屏的video在页面后方

补充：

1、只有在ios设备+侧边栏的情况下有问题

2、ios设备+企业微信应用形式打开 没有问题

3、安卓设备+侧边栏 的情况下也没有问题

4、代码

function isFullscreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  )
}


function requestFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen()
  } else if (elem.mozRequestFullScreen) {
    /* Firefox */
    elem.mozRequestFullScreen()
  } else if (elem.webkitRequestFullscreen) {
    /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen()
  } else if (elem.msRequestFullscreen) {
    /* IE/Edge */
    elem.msRequestFullscreen()
  }
}


class FullscreenVideo extends React.Component {
  static propTypes = {
    src: PropTypes.string,
  }


  static defaultProps = {
    src: '',
  }


  componentDidMount() {
    document.addEventListener('fullscreenchange', this.fsHandler)
    document.addEventListener('webkitfullscreenchange', this.fsHandler)
    document.addEventListener('mozfullscreenchange', this.fsHandler)
    document.addEventListener('MSFullscreenChange', this.fsHandler)
  }


  componentWillUnmount() {
    document.removeEventListener('fullscreenchange', this.fsHandler)
    document.removeEventListener('webkitfullscreenchange', this.fsHandler)
    document.removeEventListener('mozfullscreenchange', this.fsHandler)
    document.removeEventListener('MSFullscreenChange', this.fsHandler)
  }


  fsHandler = () => {
    if (!isFullscreen() && this.videoRef) {
      this.videoRef.pause()
    }
  }


  play = () => {
    this.videoRef.play()
    requestFullscreen(this.videoRef)
  }


  render() {
    const {src} = this.props


    return (
      <video
        ref={videoRef => (this.videoRef = videoRef)}
        height="0"
        width="100%"
        webkitPlayinline
        playinline
      >
        <source src={src} />
      </video>
    )
  }
}


export default FullscreenVideo