Scrolling not working – Status301 Premium

Tagged: scrolling

This topic has 13 replies, 4 voices, and was last updated 6 years, 11 months ago by Rolf.

Viewing 13 reply threads

Author

Posts
- 26 January 2016 at 05:05 #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
- 26 January 2016 at 18:38 #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.
- 26 January 2016 at 18:51 #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.
- 17 October 2016 at 03:39 #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
- 17 October 2016 at 17:42 #7140
  
  Rolf
  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?
- 17 October 2016 at 18:47 #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
- 17 October 2016 at 19:04 #7142
  
  Rolf
  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.
- 17 October 2016 at 20:02 #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>
```
- 17 October 2016 at 21:42 #7144
  
  Rolf
  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?
- 17 October 2016 at 22:03 #7145
  
  Daniel
  Participant
  
  Of course you can. Thank you for taking this issue seriously. I guess you have my email address?
- 17 October 2016 at 22:37 #7146
  
  Rolf
  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?
- 17 October 2016 at 22:37 #7147
  
  Rolf
  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?
- 17 October 2016 at 23:26 #7148
  
  Daniel
  Participant
  
  I just did the test, but no improvement so far. It shows the exact same behavior like before…
- 18 October 2016 at 22:18 #7153
  
  Rolf
  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?
Author

Posts

Viewing 13 reply threads

You must be logged in to reply to this topic.