In an application or site that employs modals (like these) what is seen as the best approach for managing the dynamically added additional space when a scrollbar is needed?
When a modal opens currently the page's available content width can change by about 17px (depending on whether the page has a scrollbar, what browser, screen width and whether the modal has a scrollbar itself). This width change causes the content to re-flow slightly, both in the modal and page behind, on opening and closing the modal.
Edit to add e.g.
Before the modal is opened
After the modal is opened
The modal itself is not changed, it is the addition of
overflow: hidden on the
body that changes the page width, because it hides the scrollbar so the user can (if necessary) scroll within the modal.
I've had comments from users (who were asked to think generally about improvements) that "some popups [modals] are broken" because they "jump about the screen". Testing suggests this is a marginal, width-only movement, but it is jerky as a scrollbar is basically popping between
display: none and
The options I can see:
- Make a statement about why this is not going to happen
- Attempt a third-way using a more simplistic hack in the front end that animates the change in width via CSS making it a "feature" rather than a "bug"
- Hum quietly to myself and move on to the next thing, using the justification that only a small proportion of users mentioned it
(1) is time-expensive and requires a lot of testing, (2) could aggravate users, (3) is not something users have explicitly asked for but kinda / maybe / might / sort of be OK and (4) is favoured by management under the heading "expediency"
I find all these options to be unpalatable to a greater or lesser degree for different reasons so is there a UX or UI way to solve this, a generally accepted way of managing this kind of issue or even a best option?