Scrolling not working

Your Account / Forums / Easy FancyBox Pro / Scrolling not working

Tagged: 

  • Author
    Posts
    • January 26, 2016 at 5:05 am #6032

      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

    • January 26, 2016 at 5:05 am #6033

      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.

    • January 26, 2016 at 5:05 am #6034

      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.

    • January 26, 2016 at 5:05 am #7139

      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

    • January 26, 2016 at 5:05 am #7140

      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?

    • January 26, 2016 at 5:05 am #7141

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

      http://xn--verein-mitenand-lbe-wwb.ch/?page_id=1796

      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

    • January 26, 2016 at 5:05 am #7142

      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.

    • January 26, 2016 at 5:05 am #7143

      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>
    • January 26, 2016 at 5:05 am #7144

      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?

    • January 26, 2016 at 5:05 am #7145

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

    • January 26, 2016 at 5:05 am #7146

      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?

    • January 26, 2016 at 5:05 am #7147

      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?

    • January 26, 2016 at 5:05 am #7148

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

    • January 26, 2016 at 5:05 am #7153

      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.