页面不在前台时，Modal.close 不会销毁组件，导致页面部分区域无法点击

[noe132]

Version of antd-mobile

5.37.1

Operating system and its version

iOS, Android

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

使用 Modal.show 打开一个对话框，然后关闭，全程页面不在前台，此时页面上会留下一个空白的 div.adm-center-popup-wrap 在中间，用户再将页面切到前台时，这一块区域将无法点击。

复现代码：

const Page = () => {
  useEffect(() => {
    const handle = Modal.show({
      content: 'hi'
    })
    setTimeout(() => {
      handle.close()
    }, 100);
  }, [])

  return (
    <div>hi</div>
  )
}

复现步骤：

1. 启动一个项目，在chrome浏览器打开上面代码的页面
2. 在chrome 切换到其他tab
3. 右键点击步骤1打开的tab，选择reload刷新页面
4. 等待几秒钟页面刷新完毕，代码中的Modal打开并关闭
5. 切回步骤1的tab
6. 通过开发者工具可以看到页面中间的空白div

图片：

问题原因：
Modal 使用了 CenterPopup 其中 afterClose 会在 动画结束后调用(代码60行)。当页面不在前台时，onRest不会被触发，afterClose也不会被调用。
pmndrs/react-spring#1565

ant-design-mobile/src/components/center-popup/center-popup.tsx

Lines 54 to 63 in c26f7db

	onRest: () => {
	if (unmountedRef.current) return
	setActive(mergedProps.visible)
	if (mergedProps.visible) {
	mergedProps.afterShow?.()
	} else {
	mergedProps.afterClose?.()
	}
	},
	})

Relevant log output

[zombieJ]

切换回来的时候不会继续动画的？神奇……

[noe132]

切换回来的时候不会继续动画的？神奇……

我猜测应该是需要从打开modal到关闭modal，页面都要是不在前台，这种情况就能稳定复现了。
我这项目里的loading动画之前是用这个Modal.show写的，大概就是有另一个页面压入了页面栈，此时这个页面不在前台，在后台时页面发请求，展示loading的，然后请求完毕关闭modal，最后用户点返回，返回到这个页面，触发了这个问题。测试发现这个问题也是偶尔复现，感觉和一些边界情况有关。

[zombieJ]

那这个问题是特定浏览器、特定系统的么？

[noe132]

那这个问题是特定浏览器、特定系统的么？

目前来看不是的。我在电脑上用chrome可以复现，测试用他的ios手机也可以复现。