JQuery Popup Overlay works on browser resize, doesn't work on mobile devices

Discussion in 'HTML & Website Design' started by Borg9, Feb 22, 2016.

  1. #1
    I'm having a really frustrating problem w/ getting this popup overlay plugin to work on my site. If I resize the browser, the overlay stays at 100% of the viewport and the responsive layout of the divs adjust correctly. However, when I open the popup on an ipad or iphone, the overlay expands beyond the viewport and you can barely scroll. Here's the example:

    http://linseedstudio.com/projects/kast/purchaseinstores.html

    And here's the source of the plugin:

    http://dev.vast.com/jquery-popup-overlay/

    I'd be incredibly grateful for anyone's ideas on what might be the culprit.

    Thank you!

    _Mike

    Additional Note:

    I just tried on Safari ios and it seems that while the overlay still exceeds the viewport width after initially opening it, changing the orientation once makes the overlay fit. Only in Safari though, doesn't work in Firefox or Chrome.
     
    Borg9, Feb 22, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    How have you implemented the plugin on your site? Code-examples, please. As far as I can see from the plugin-site, it works perfectly regardless of browser / screen-size, so it must be your implementation that is buggy (most likely).
     
    PoPSiCLe, Feb 22, 2016 IP
  3. Borg9

    Borg9 Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thanks for the quick reply PoPSiCLe. I also noticed that the original code works on mobile, so yeah, it's definitely something to do w/ the implementation. I've attached the html file for the page in question instead of pasting it all in here, let me know if you get a chance to look at it and have any ideas. And again the live version is located here:
    http://linseedstudio.com/projects/kast/purchaseinstores.html

    Thanks again!
     

    Attached Files:

    Borg9, Feb 22, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,329
    Likes Received:
    1,708
    Best Answers:
    31
    Trophy Points:
    475
    #4
    I checked it on my ipad and I am not sure I am seeing what you're describing there.

    I went to your http://linseedstudio.com/projects/kast/purchaseinstores.html then I clicked on one of the "click for full list". It opens a popup that I can scroll down (not up though). I don't like the fact that the menu disappears when the popup is open. I have to click "Back to states" to get to the menu again. As far as it fitting the screen I don't see any issues. You may want to click on the reload button on all your browsers. It could be that all the them cached the old version of your site or something.

    Looks the same on my cell phone.
     
    qwikad.com, Feb 23, 2016 IP
  5. Borg9

    Borg9 Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Thanks for the feedback and that's interesting to know that it works for you, I've cleared the cache and it doesn't remedy the problem. Can you tell what ipad and cell phone you're using? Maybe it only works for newer models.
     
    Borg9, Feb 23, 2016 IP