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

Problem Description

Depending on your site's active theme, you might find that when a popup is displayed, your entire site ( or site elements such as the header) shift a small amount of pixels.  Typically this 'jump' or 'skip' occurs toward the right ( towards the browser's vertical scrollbar )

This is not a 'bug' within the Popup Maker plugin. It's simply a result of how some themes and sites interact with browsers and vertical scrollbars.

Likely Cause 

Popups can render their own vertical scrollbar when the content is longer than the popup height, and the scrollable content feature is enabled. See the related articles below for details.

Related article:  'Display - Size' option settings

Related article:  How to Display Different Popup and Overlay Scroll Effects in Combination

When a popup vertical scrollbar is visible, Popup Maker hides the page's <html> element to prevent the display of double scrollbars.

This causes the document width to 'jump' for a split second when the vertical scrollbar for the page is hidden, and the scrollbar for the popup is shown.

Your site header and other theme elements are resized using JavaScript. This means the theme detects slight changes to the page HTML, and resets the widths of those elements. That is what causes the jumping behavior.

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

Some plugin competitors to Popup Maker do not have the same issue with their plugin. Those plugins limit what users can add or customize in their popup. 

Plugins such as Popup Maker that allow greater popup customization  do exhibit the issue with temporary jumping or skipping.  The popup behavior has to do with the way browsers and scrollbars interact to reset website page dimensions when a popup displays.

Solution #1

Since the main source of the issue lies with the popup overlay scrollbar, disable the overlay layer to fix the issue. See the related article for guidance on how to turn off the overlay layer from within the Popup Editor. 

The 'disable overlay' setting applies  separately to each popup. If two or more popups are active on your site, each popup will require the same option to be set.  

Related article:  'Display - Advanced' option settings

Solution #2

If you prefer to maintain the overlay layer on your popup, then we recommend the addition of some custom CSS to your theme stylesheet that may solve the issue. These solutions are confirmed to work on some, but not all sites.  You also may have to adjust the margin-right pixel value to suit the needs of your specific site theme.

Add the CSS snippet either to your active theme stylesheet, or use a free plugin such as  'Simple Custom CSS and JS' in which to make your changes. 

Solution #3

This solution is similar to the one above with some slight modifications. It follows the same pattern as the previous solution.  Again, the solution may or may not work on your site. The pixel values for the 'margin-right' properly may require adjustment for your specific theme. 

Compatibility Note:

Some users have mentioned that setting the 'padding-right' property to a value of 0 in solution #2 and #3, rather than 'inherit' was the only way they could solve the problem within their themes.