我正在使用 Material UI 开发 React 应用程序。我的应用程序的一页有问题。
该页面包含一些文本和一个按钮，它们彼此垂直对齐。它还包含第二段文本和第二个按钮，它们彼此垂直对齐并且最初是隐藏的。第一个按钮可用于显示第二段文本和第二个按钮。第二个按钮可用于隐藏第二段文本及其本身（即第二个按钮）。
这是页面屏幕截图的链接，初始隐藏的内容可见（我还没有足够的 StackOverflow 代表点来嵌入图像）。
react-material-ui-app-page-screenshot
我遇到的问题是：
当我点击第一个按钮（即“SHOW”按钮），然后点击第二个按钮（即“HIDE”按钮），然后再次点击第一个按钮；第一个按钮跳过页面。更具体地说，它从让它的右边缘接触<body>元素的右边缘，到让它的左边缘接触前一段文本的右边缘。
一旦按钮跳转，当我调整浏览器窗口的大小（例如通过单击并拖动 Chrome 应用程序窗口）时，按钮将返回到其原始位置。
注意：跳转发生在 Chrome 中，但不在 Firefox 中。
你们中有人知道为什么会这样吗？
我在 CodeSandbox 上创建了这个现象的演示。这是该演示的链接：
