Drawer and overflow: 'scroll', causing Google Chrome, mobile Google Chrome white screen

[mybraveheart]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/mybraveheart/react-test

Steps to reproduce

npm start 启动项目，打开谷歌浏览器，打开控制台，以手机模式调整分辨率为iphone6/7/8 plus的，刷新浏览器，在数字跳到2时，鼠标左键点击灰色区域，3秒后出现白屏，手机谷歌浏览器打开后，在数字跳到2时,鼠标左键点击灰色区域，3秒后出现白屏。备注：如果接口调用频繁，会间断性的出现白屏现象，拖动控制台可以恢复。

What is expected?

期望不出现白屏或者闪烁的现象。

What is actually happening?

手机谷歌浏览器或者电脑谷歌浏览器白屏。

Environment	Info
antd	4.2.2
React	16.12.0
System	mac10.14.6
Browser	81.0.4044.129

---

业务场景是在做drawer侧滑窗口时，打开窗口，切换窗口内部按钮,改筛选条件会调用setState，发现每点击几次就会出现白屏的现象，最后定位精简了一下代码，发现只需要设置几个属性便会重现，不知道白屏的原因是？解决方案目前是将overflow: 'scroll' 改为overflow: 'hidden'，不知原因。附代码。useRequest通过mock设置延迟，第一个接口2秒返回，第二个接口5秒返回。
`

import React from 'react';
import { Drawer } from 'antd';
import { useRequest } from 'umi';
let i = 0;
export default () => {
  useRequest(username => ({
    url: '/api/bar/data1',
    method: 'get',
  }));
  useRequest(username => ({
    url: '/api/bar/data3',
    method: 'get',
  }));
  return (
    <>
      {
        <div
          style={{
            overflow: 'scroll',
            width: '30px',
            height: '15px',
            border: '1px solid',
          }}
        >
          {i++}
          <br />
          <br />
        </div>
      }
      <Drawer visible={true}></Drawer>
    </>
  );
};

`

[mybraveheart]

help

[mybraveheart]

你的repo 根本跑不了

可以啊，你说完我就重新下载了一下，可以跑

[yoyo837]

去掉 index.tsx的 width: '30px'试试

[mybraveheart]

去掉 index.tsx的 width: '30px'试试

不是解决方案是有的，解决方案目前是将overflow: 'scroll' 改为overflow: 'hidden'，不知原因
我是想知道为什么会造成白屏

[mybraveheart]

猜测是drawer组件内部的动画导致的白屏，但是发现跟浏览器也有一定关系，谷歌的浏览器（手机，电脑）都存在问题，火狐就没有问题

[yoyo837]

至少保留一个body 100%宽的元素

[mybraveheart]

跟这个没有关系吧，我改了width: '100%',提交了代码 没有任何变化，切换浏览器tab窗口同样会造成白屏，我需要一些组件内部造成这个白屏的原因（深层的），不是表面现象

至少保留一个body 100%宽的元素

[mybraveheart]

自己定位到原因了，是node_modules/_rc-drawer@3.2.0@rc-drawer/es/DrawerChild.js中，使用到了如下两条语句 document.body.scrollHeight;document.body.style.touchAction = 'none';
搭配使用就会造成白屏现象，这应该是读取了scrollHeight，跟浏览器重排相关。而跟touchAction = 'none'搭配就会白屏，具体浏览器机制方面的原因有没有阿里大神愿意解答一下原因。把<Drawer visible={true}></Drawer>代码替换成以下代码就会出现白屏了。
`

{setTimeout(() => {
        document.body.scrollHeight;
        document.body.style.touchAction = 'none';
      }, 1000)}

`

[afc163]

现在还能重现么？

[afc163]

ping @mybraveheart

[afc163]

没有反馈，先关了，如果还有问题可以回复，我会 reopen。