Why Does My Site "Shift", "Jump", "Move" or "Skip" When a Popup Is Triggered?


Depending on your site's Theme, you might find that, when a popup is displayed, you site, or elements of your site (such as the header), will shift a small amount of pixels - generally this "jump" or "skip" is to the right - towards the scrollbar of the site.

To be clear, this is not a "bug". This behavior is simply a result of how some themes and sites interact with browsers and scrollbars.

Cause and Explanation

Popups have their own scrollbar (if the Overlay is visible and the content is longer than the Overlay).

When that popup scrollbar is visible we hide the scrollbar on the HTML element (site page) to prevent double scrollbars.

Because of this, the document width jumps for a split second when that bar is hidden and ours is shown.

Your site header and other elements of your theme are resizing using JavaScript - this means they detect that slight change and then reset the widths of those elements. This is what causes the jumping.

How Come Some Other Popup Plugins Don't Have This Issue?

The reason some of our competitors do not have this issue is because of the way their plugin operates. Most popup plugins are very limited in what users can customize and what users are allowed to input into their popup. Therefore, simpler popup plugins don't have this issue.

Other, more advanced competitors, however, do have this issue. All in all, it's a universal issue having to do with the way browsers and scrollbars interact with website page dimensions.

Solution #1

Since the main culprit of this issue lies within the scrollbar of the Popup Overlay, simply disabling the Overlay will solve this issue. Find this setting in the Popup Editor, under the Display Settings Pane, within the Overlay Section.

Solution #2

If you do not want to disable your Overlay for aesthetic reasons, then we have some custom CSS that may solve the issue. These solutions have been confirmed to work on some, but not all, setups.

You also may have to adjust the margin-right pixel value to suit your setup perfectly:

Solution #3

This solution is basically the same as the one above, with some slight modifications. It follows the same pattern as the solution above: it may or may not work for you, and you may have to adjust the pixel values to suit your setup.

Compatibility Note:

Some users have mentioned that setting padding:0 in solution #2 & #3 rather than inherit was the only way they could solve it with their themes.