Scrolling not working

Home Forums Easy FancyBox Pro Scrolling not working

Tagged: 

This topic contains 13 replies, has 4 voices, and was last updated by  Pharéo 11 months, 1 week ago.

  • Author
    Posts
  • #6032

    William Even
    Participant

    Hi Rolf,

    I am using Easy FancyBox Pro in a new site and I can’t get the scrolling to automatically appear.

    MenardLaw.com is the site. You can activate the pop-up by clicking on the “Subscribe Now” button at the bottom of the page.

    The problem specifically lies with an iPad in lansdscape format.

    Also, I saw your comment about “canceling” the FancyBox effect by using this script:

    <script type=”text/javascript”>
    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth/pixelRatio < 2900 ) {
    easy_fancybox_handler = null;
    };
    </script>

    but I am not sure where exactly to place the script on my page.

    Many thanks in advance.

    Bill

  • #6033

    RavanH
    Keymaster

    Hi Bill, I’ll have to test your site on a tablet. I don’t have an iPad but it might be the same on Android…

    The script can go in a text widget or in your theme’s footer.php before the wp_footer() call and will disable the light box on smaller screens and viewports depending on the innerWidth value you set.

  • #6034

    RavanH
    Keymaster

    Update: testing your popup on an Android (with Chrome) the scroll works fine. Does it not work at all on the iPad or is it just that the scroll bar is not visible until you try and swipe up? It’s like that on Android which is normal for a touch device.

  • #7139

    Daniel
    Participant

    Hi, I just found this thread because I have the same problem like Bill had months ago: the content (loaded url) of my lightbox is not scrollable on an iOS device, no matter what url I load in.

    RavanH, did you get to test it on an iOS device yet? It’s not only that the scroll bar doesn’t appear (what would be normal behaviour) but that only the whole page in the background gets scrolled. It makes no difference whether the device is in portrait or landscape mode.

    Could you please help an get this fixed? Thank you so much.

    Daniel

  • #7140

    Pharéo
    Participant

    Hi Daniel, sorry to say we have not identified the cause yet but it’s interesting that you say “but that only the whole page in the background gets scrolled” … It would mean that the scrolling action is applied to the background instead of the foreground frame and maybe we can find a way to change that.

    First: can you share a link to the page with light box where the issue is occurring?

  • #7141

    Daniel
    Participant

    Thanks for responding so fast. Sure, here’s the link to the page:

    Dorf-Bibliothek

    It’s an elderly people association’s website. The plugin is working perfectly fine on normal PCs or Macs.

    Just click one of the books on the page and the lightbox will open.

    I also wondered if it was possible to scale the content of the box to fit its width on a phone or a tablet

    Thanks again for helping!
    Daniel

  • #7142

    Pharéo
    Participant

    OK, could you check the test page http://status301.com/test/ with your iPad?

    The script there tries to put browser focus on the frame right after opening of the light box. It might just make the difference we need. If not, I’ll search further.

  • #7143

    Daniel
    Participant

    Unfortunately this lightbox doesn’t work either.

    I’ve already tried the focus command before. Here’s what the code in my book-template looks:

    <?php
    /**
     * Template Name: Buch-Box 2
     * This template will only display the content
     */
    ?>
     
    <html <?php language_attributes(); ?> class="no-js">
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php wp_head(); ?>
        <style>
            body {
                margin: 30px;
            }
     
            body:focus {
                outline: none;
            }
        </style>
    </head>
        
    <body >
    <?php
        while ( have_posts() ) : the_post();   
            the_content();
        endwhile;
    ?>
    <?php wp_footer(); ?>
    </body>
    </html>
  • #7144

    Pharéo
    Participant

    Thanks for the feedback. I’ll search further. It seems that this issue is wider known and even occurs in the regular Safari browser in some cases… Can I contact you via email for further assistance and testing tomorrow?

  • #7145

    Daniel
    Participant

    Of course you can. Thank you for taking this issue seriously. I guess you have my email address?

  • #7146

    Pharéo
    Participant

    Yes, I have 🙂

    One final test for today: I’ve replaced the CSS “-webkit-overflow-scrolling: touch” with “auto” as that is reported on some forums as possible solution. Could you check http://status301.com/test/ again — preferably with an empty browser cache, if that is possible on an iPad?

  • #7147

    Pharéo
    Participant

    Yes, I have 🙂

    One final test for today: I’ve replaced the CSS “-webkit-overflow-scrolling: touch” with “auto” as that is reported on some forums as possible solution. Could you check http://status301.com/test/ again — preferably with an empty browser cache, if that is possible on an iPad?

  • #7148

    Daniel
    Participant

    I just did the test, but no improvement so far. It shows the exact same behavior like before…

  • #7153

    Pharéo
    Participant

    That’s too bad… I’m going to have to try another approach: fixing the background. This has been requested in another context so it might solve two issues at once. However, it will probably bring along all kinds of side-effects so it will have to be carefully done. I’ll be able to work on it next week. Hope that’s OK for you?

You must be logged in to reply to this topic.