iframe won't scroll on mobile

@pnilz – just to make sure: are you not able to scroll the iframe content at all on the iDevices? Or does it just not show any scroll bars while scrolling with one or two finger touch is possible?

Please test this CSS in your themes stylesheet or with Jetpack’s Custom CSS module:

#fancybox-frame {
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

Could you test the above CSS snippet?

If that does not solve it, I fear only the work-around on https://discussions.apple.com/message/19780023#19780023 works 🙁

And BTW, the workaround you linked to isn’t working for me. :/ Maybe I’m implementing it incorrectly. Here’s my test page:
http://qalytics.net/page/

Click the “Learn More” link to call http://qalytics.net/home-2/. This is the page where I placed the workaround div tag from your most recent post.

Thanks for you attention to this, Ravan. I love your plug-in – if only I can get this issue fixed!

Thanks for looking, Ravan. I’ve been doing more testing, and in the process I re-named the page for greater clarity – sorry I forgot to update this thread. I’m trying to get both inline and iFrame to work on iOS, with no success.

1. If I use inline content, the content won’t resize to the constrained window and initiates horizontal scrolling on the phone.
2. If I use an iFrame, the content won’t scroll at all, on either iPhone or iPad.

You can see for yourself at the following links:
Easy FancyBox inline: http://qalytics.net/efb-inline/
Easy FancyBox iFrame: http://qalytics.net/easy-fancybox-iframe/

I’ve tried using percentages and ems rather than px to specify the lightbox window dimensions, but that didn’t seem to work either. Any thoughts?

Rick

Ravan,

I think I have a solution to scrolling inline lightbox content on iOS! I cobbled it together from different sources, but it seems to provide the correct scrolling behavior on iOS.

I first found this: http://runastartup.com/overlay-scrolling-issues-on-iphone-ipad/
Which led me to this: http://www.two-legs.com/2012/07/html5-native-scrolling-on-iphone-ios5/2/ (which is the real magic)

Here’s the HTML I’m using:

<div id="fancybox-hidden" style="display: none">
<div id="container">
 <div id="overlay">
   <div id="fancyboxID-OURSERVICES">
    <div class="cell">We help clients create sustainable value in a globally competitive world by providing the best possible quality assurance support for their software needs.  We continually seek to improve software quality throughout the development process.  Our proven methods result in a higher quality finished product.</div>
    <div class="cell">Developers need every possible advantage to improve their chance of commercial success.  Our experienced external QA group provides invaluable feedback to you and your development team.  This feedback helps your team focus on key success factors and reduces overall costs through more efficient use of your team’s time.  Ultimately, the harshest review you will ever receive is when consumers do not buy your product.  You can help prevent that by making a small investment in our QA services.</div>
    <div class="cell">Our team of QA experts work and live in the United States. Combining our in-depth game and app development experience with a comprehensive understanding of US and Canadian markets enables us to seamlessly integrate with your team.</div>
    <div class="cell">It takes a knowledgeable partnership to provide quality assurance services for interactive games and apps for mobile devices.  We focus on lowering development costs while helping you develop better digital products with sustainable value.  Our services span the software lifecycle from concept creation to product development to post-launch support and monetization.  Our hands-on knowledge of the challenges you face creating interactive products enables us to integrate our services with your development team in a more cohesive manner than any quality assurance company you have ever worked with.
    </div>
    </div>
   </div>
  </div>
 </div>
<div style="text-align: center; margin: 1em 6% 0 6%;"><a class="x-btn fancybox-inline x-btn-square x-btn-regular" href="#fancyboxID-OURSERVICES" data-toggle="none" data-placement="top" data-trigger="hover" data-type="inline"> LEARN MORE </a></div>

The container, overlay and cell divs are critical to this working properly. Here’s the corresponding CSS:

#container {
    display: block;
    position: relative;
    margin: 0 auto;
    background-color: #000;
    z-index: 0;
}
#overlay {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 auto;
    width:950px;
    height:530px;
    background-color: #000;
    z-index: 3;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.cell {
  position: relative;
  line-height: 1.5em;
  padding: 10px;
  margin:0 10px 0 10px;
  -webkit-transform: translateZ(0);
}

You can see a working example at http://qalytics.net/index.php. Don’t click on the sliders – I don’t have it working there yet. Click on the Learn More link below Our Services. And do tell me if you encounter any issues!