Modal Test: Scrolling
Github Issue: #2602
This page tests that when a modal component is opened over top of a scrollable space, scrolling does not occur underneath of the modal. This behavior would be most prevalent in iOS environments.
Scroll this page to the middle, where the modal's trigger button is present, and tap the button to open. After the modal is opened, try to scroll, and close the modal. After closing the modal, the contents of the main body area should not have scrolled.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in vitae turpis. Etiam tempor orci eu lobortis. Quis risus sed vulputate odio ut enim blandit volutpat. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Mattis enim ut tellus elementum sagittis vitae et leo duis. Vulputate sapien nec sagittis aliquam. Non arcu risus quis varius quam quisque id. Scelerisque in dictum non consectetur a erat nam at lectus. Ut ornare lectus sit amet est. Neque convallis a cras semper auctor.
Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Eu consequat ac felis donec et odio pellentesque diam. Blandit libero volutpat sed cras ornare arcu dui. Donec adipiscing tristique risus nec. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Lacus sed turpis tincidunt id aliquet. Scelerisque eu ultrices vitae auctor eu. Amet justo donec enim diam vulputate ut pharetra. Nisl vel pretium lectus quam. Augue interdum velit euismod in pellentesque. In nisl nisi scelerisque eu ultrices. Amet consectetur adipiscing elit pellentesque habitant. Ipsum dolor sit amet consectetur adipiscing elit. Ut aliquam purus sit amet. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Tellus cras adipiscing enim eu turpis egestas. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit.
Ultrices vitae auctor eu augue ut. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Tincidunt id aliquet risus feugiat. Amet facilisis magna etiam tempor orci. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Sem et tortor consequat id porta. Mattis ullamcorper velit sed ullamcorper. Habitasse platea dictumst quisque sagittis purus sit. Faucibus vitae aliquet nec ullamcorper sit amet. Justo eget magna fermentum iaculis eu non diam phasellus.
Et tortor consequat id porta nibh. Suspendisse in est ante in nibh mauris cursus mattis molestie. Morbi quis commodo odio aenean sed adipiscing diam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Eleifend quam adipiscing vitae proin sagittis nisl. Porta nibh venenatis cras sed. Volutpat sed cras ornare arcu dui. Cum sociis natoque penatibus et magnis dis parturient. Risus feugiat in ante metus dictum at tempor. Convallis aenean et tortor at risus viverra adipiscing. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Ante in nibh mauris cursus mattis. Nam at lectus urna duis convallis convallis tellus. Mollis aliquam ut porttitor leo a diam sollicitudin. Turpis massa sed elementum tempus egestas sed sed. Feugiat sed lectus vestibulum mattis ullamcorper. Egestas pretium aenean pharetra magna ac placerat. Consequat mauris nunc congue nisi vitae suscipit tellus. Varius quam quisque id diam vel. Lacus vel facilisis volutpat est velit egestas dui id ornare.
Iaculis at erat pellentesque adipiscing commodo elit at. Aliquet nec ullamcorper sit amet risus. Commodo odio aenean sed adipiscing. Eget sit amet tellus cras adipiscing enim eu. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Cursus in hac habitasse platea dictumst quisque sagittis. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada. Pretium vulputate sapien nec sagittis aliquam. Consequat interdum varius sit amet. Cum sociis natoque penatibus et magnis dis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in vitae turpis. Etiam tempor orci eu lobortis. Quis risus sed vulputate odio ut enim blandit volutpat. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Mattis enim ut tellus elementum sagittis vitae et leo duis. Vulputate sapien nec sagittis aliquam. Non arcu risus quis varius quam quisque id. Scelerisque in dictum non consectetur a erat nam at lectus. Ut ornare lectus sit amet est. Neque convallis a cras semper auctor.
Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Eu consequat ac felis donec et odio pellentesque diam. Blandit libero volutpat sed cras ornare arcu dui. Donec adipiscing tristique risus nec. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Lacus sed turpis tincidunt id aliquet. Scelerisque eu ultrices vitae auctor eu. Amet justo donec enim diam vulputate ut pharetra. Nisl vel pretium lectus quam. Augue interdum velit euismod in pellentesque. In nisl nisi scelerisque eu ultrices. Amet consectetur adipiscing elit pellentesque habitant. Ipsum dolor sit amet consectetur adipiscing elit. Ut aliquam purus sit amet. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Tellus cras adipiscing enim eu turpis egestas. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit.
Ultrices vitae auctor eu augue ut. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Tincidunt id aliquet risus feugiat. Amet facilisis magna etiam tempor orci. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Sem et tortor consequat id porta. Mattis ullamcorper velit sed ullamcorper. Habitasse platea dictumst quisque sagittis purus sit. Faucibus vitae aliquet nec ullamcorper sit amet. Justo eget magna fermentum iaculis eu non diam phasellus.
Et tortor consequat id porta nibh. Suspendisse in est ante in nibh mauris cursus mattis molestie. Morbi quis commodo odio aenean sed adipiscing diam. Fermentum dui faucibus in ornare quam viverra orci sagittis. Eleifend quam adipiscing vitae proin sagittis nisl. Porta nibh venenatis cras sed. Volutpat sed cras ornare arcu dui. Cum sociis natoque penatibus et magnis dis parturient. Risus feugiat in ante metus dictum at tempor. Convallis aenean et tortor at risus viverra adipiscing. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Ante in nibh mauris cursus mattis. Nam at lectus urna duis convallis convallis tellus. Mollis aliquam ut porttitor leo a diam sollicitudin. Turpis massa sed elementum tempus egestas sed sed. Feugiat sed lectus vestibulum mattis ullamcorper. Egestas pretium aenean pharetra magna ac placerat. Consequat mauris nunc congue nisi vitae suscipit tellus. Varius quam quisque id diam vel. Lacus vel facilisis volutpat est velit egestas dui id ornare.
Iaculis at erat pellentesque adipiscing commodo elit at. Aliquet nec ullamcorper sit amet risus. Commodo odio aenean sed adipiscing. Eget sit amet tellus cras adipiscing enim eu. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Cursus in hac habitasse platea dictumst quisque sagittis. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada. Pretium vulputate sapien nec sagittis aliquam. Consequat interdum varius sit amet. Cum sociis natoque penatibus et magnis dis.