Я занимаюсь разработкой приложения React с использованием Material UI. У меня проблема с одной страницей приложения.
Эта страница содержит текст и кнопку, которые выровнены по вертикали друг с другом. Он также содержит второй фрагмент текста и вторую кнопку, которые вертикально выровнены друг с другом и которые изначально скрыты. Первая кнопка может использоваться, чтобы показать второй фрагмент текста и вторую кнопку. Вторая кнопка может использоваться, чтобы скрыть второй фрагмент текста и себя (т.е. вторую кнопку).
Вот ссылка на скриншот страницы с видимым изначально скрытым содержимым (у меня нетдостаточно точек повторения StackOverflow для встраивания изображения).
Reaction-material-ui-app-page-screenshot-1008 *
У меня проблема в том, что:
Когда я нажимаю первую кнопку (т.е. кнопку «ПОКАЗАТЬ»), затем нажимаю вторую кнопку (то есть кнопку «СКРЫТЬ»), затем снова нажимаю первую кнопку; первая кнопка перепрыгивает через страницу . Точнее говоря, он касается того, что его правый край касается правого края элемента <body>, и его левый край касается правого края предыдущего фрагмента текста.
После того, как кнопка перепрыгнула, когдаКогда я изменяю размер окна браузера (например, щелкая и перетаскивая окно приложения Chrome), кнопка возвращается в исходное положение.
Примечание. Прыжок происходит в Chrome , но не в Firefox.
Кто-нибудь из вас знает, почему это происходит?
Я создал демонстрацию этого явления на CodeSandbox. Вот ссылка на эту демонстрацию: