How to deal with modals and scrollbars

Question

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.

/Edit

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 display: block).

The options I can see:

1. "Fix" what a minority of users have complained about when prompted for issues (but potentially all have noticed) and implement a complex scrollbar-width-compensating in JavaScript similar to that implemented in Bootstrap.
2. Make a statement about why this is not going to happen
3. 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"
4. 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?

Answer 1

I believe that horizontal overflow of the data is also or an prion.

There are several things you need to deal with, and some that you need to live with.

The first thing to live with is: if a web app uses modals, it is going to use modals. This may be obvious, but eliminating every modal out there would probably lead to changing a lot of the solutions that work for Users now, affecting them in some cases (probably). The cost and potential harm you would do would be bigger than the gain (most probably).

The second thing to live with is: if you cannot tell how much content will be put in modals, preventing the scroll bar from showing is not an option.

And the third one: it is not possible to make everyone happy (and there is never a business reason in trying to do so). Optimisation is a matter of improving things, not making them perfect. So, you need to decide first if the significance of the problem is high enough.

You can experiment with the changes you make, and when experimenting, try to apply some simple tweaks first.

These are the cornerstones for your further decision. The approach I would suggest from now would be conducting some simple experiments and seeing if it improves the usability for the Users.

The first experiment I would suggest would be making the page scroll bar always visible and checking the Users' feedback.

Regarding the content in the modals, I would display the scroll bar only if there is something overflowing it, and maybe indicating this content by slightly fading it to transparent near the bottom of the scrollable area. In extreme cases of some information being omitted I would also consider adding an indicator that there is more data to present in the modals.