Iframe overlapping website content on mobile

  • On mobile, when the page that contains the chat plugin loaded, the Website right side space (burger menu) is not clickable and left side space is clickable.

    It’s caused by this iframe as the height doesn’t always go to 0 and has a very high z-index – so is always over all the content underneath.

    div.fb-customerchat.fb_invisible_flow.fb_iframe_widget span iframe.

    somehow plugin is not expecting this behavior and wrongly applies max-height=calc(100% – 80px) to the iframe.

    If I click twice on the messenger icon (opens and closes pop-up) it will solve the problem.

    This isn’t the same behavior as you close the pop-up because when you do it plugin will apply max-height=0 and height=0 to the iframe.

    So, please solve this problem as the plugin should behave the same way as when we close the chat pop-up.

    I tried javascript to force the height of the iframe when the pages load but without success because the pop-up rewrite this settings.

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • I have the exact same problem! Please help.

    Problem is obvious, but needs to be fixed in the plugin. The z-index has an extremely high number, which overlaps everything else.

    Solutions already tried:
    Reinstall plugin
    Delete plugin entirely and install from plugin market in WordPress and reconfigure plugin
    Delete plugin entirely and install from package on wordpress and reconfigure plugin.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Iframe overlapping website content on mobile’ is closed to new replies.