• Resolved Alison

    (@alisoniddings)


    Hi there,

    Thanks for the great plugin! I am having a problem with the page shifting whenever I click on a popup. You can see it happen by clicking on either one of the Get Started for Free buttons.

    Thank you so much for any help you can provide!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • This happens to me too. (I’ve only used popups on pages that I made with Elementor so far, in case that’s important.)

    Plugin Author Daniel Iser

    (@danieliser)

    @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/.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Page shift upon popup’ is closed to new replies.