MUI Drawer在Safari与Web Gnome不渲染问题排查及解决咨询

问题现象 #

测试Enlite Starter及其演示项目时发现：模板设置里的第一个侧边栏关闭后无法再次显示。该Drawer组件在Firefox、Chrome、Edge中渲染和功能均正常，但在Web Gnome和Safari中完全不可见。

临时修复手段：在<SidebarContent />组件前添加任意字符甚至 后，Drawer会突然在Web Gnome和Safari中显示，代码示例如下：

const lgDown = useMediaQuery(theme => theme.breakpoints.down('lg'));
//...
{!lgDown && (<Drawer
    variant='permanent'
    onClose={toggleDrawerOpen}
    className={open ? classes.drawer : ''}
    open={open}
    anchor={leftSidebar ? 'left' : 'right'}
    classes={{
      paperAnchorLeft: classes.drawerWrap
    }}
  >
    &nbsp; {/* Adding a space makes the drawer visible */}
    <SidebarContent
      drawerPaper={open}
      leftSidebar={leftSidebar}
      loadTransition={loadTransition}
      dataMenu={dataMenu}
      status={status}
      anchorEl={anchorEl}
      openMenuStatus={handleOpen}
      closeMenuStatus={handleClose}
      changeStatus={handleChangeStatus}
      userAttr={userAttr}
    />
 </Drawer>)}

已尝试的排查操作 #

• 确认<Drawer />已存在于DOM中（添加红色边框后可看到其轮廓）
• 通过console.log(document.querySelector(".MuiDrawer-root").innerHTML)验证内部内容确实存在
• 宽尺寸的侧边栏功能完全正常
• 将布局方向从LTR改为RTL后，Drawer可正常显示

待解答的问题 #

1. 为何在<SidebarContent />前添加字符或 就能让Web Gnome和Safari中的Drawer可见？
2. Safari和Web Gnome是否存在影响MUI Drawer组件的已知渲染Bug？
3. 如何不依赖临时修复手段，确保Drawer在所有浏览器中一致显示？

内容的提问来源于stack exchange，提问作者Dev M