Scrolling not working

Forums Easy FancyBox Pro Scrolling not working

Tagged: 

Viewing 13 reply threads
  • 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
      Keymaster

      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:

      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

    • #7142
      Pharéo
      Keymaster

      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
      Keymaster

      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
      Keymaster

      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
      Keymaster

      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
      Keymaster

      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?

Viewing 13 reply threads
  • You must be logged in to reply to this topic.