@alisoniddings, @melodyz – This typically is caused by themes that are either:
– expecting the normal scrollbar to always be there:
– ones that used fixed positioned elements a lot that are 100% width with right: 0;
– ones that disable the main scroll bar by default and use their own fixed position container wrapping all other content. This would be identical to how we render popups, but could cause issues. See below.
The reason is simple, the fixes vary as every theme is different.
1. When you have the overlay enabled for your popups, we add classes to the <html> element that hide the normal scrollbar. This is desired bahavior for a few reasons:
– The popup is rendered inside the overlay, thus we can add a scrollbar to the overlay for popups with content longer than the screen.
– If the overlay scrollbar shows up, you don’t want them to have 2 scrollbars there (the overlays & the pages).
– If they are scrolling the page when the popup opens and then need to scroll the popups content, you don’t want them to end up somewhere else on the page when the popup close. Because of this when we disable the main scrollbar we save its current scroll position, when the popup is closed we reset it to where it was before.
The above is a perfect user experience for any type of popup, whether its bigger than the screen or not, whether your user scrolled before opening or not etc.
2. Subsequently when we disable the normal scrollbar the page itself gets ~14-17px wider. This is the jump your seeing on those elements.
3. We attempt to auto correct this by applying styles to all elements body > *[aria-hidden]
and add aria-hidden=”true” to all elements directly in the body when a popup opens. These styles pad the right with the same 14-17px (browser dependent) to account for the space of the missing scroll bar. This prevents 99.99% of users from seeing the issue you are, only in rare cases does the padding not work correctly, but in some it actually causes issues with those elements and needs to be removed.
This outlines a few fixes that are known: https://docs.wppopupmaker.com/article/314-why-does-my-site-shift-jump-or-skip-when-a-popup-is-triggered
Hope that helps. If your issue is resolved please take a moment to rate and review the plugin or support.
If you still need help please message us directly at https://wppopupmaker.com/support/.