rickdickinson

How did you fix it?

Could I get some clarification on the parent page/sample-page issue? I want my pages to have parent pages so that I can use breadcrumbs, but when I set up the top-level pages in each sectionsto have home page as parent, suddenly /sample-page/ is inserted between the home page and top-level sections in the URL, and Home appears twice in the breadcrumbs.

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!

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

I’m having the same problem. Could this be a solution? http://stackoverflow.com/questions/18736297/webkit-overflow-scrolling-touch-broken-in-ios7