iPhone issues - Unable to scroll and fancybox has a large space below it #154

Caroline-Elisa opened this Issue Feb 17, 2012 · 8 comments


None yet
4 participants

Hi there,

I have noticed that a few people are having issues with Fancybox on their iPads and iPhones, here's my two cents.

Firstly, and most importantly, I am unable to scroll on an iframe popup. There are no scrollbars, nor can I use my finger as this just scrolls the page in the background.

Secondly, there margin below Fancybox is quite large, which means the screen space is not being maximised.

Hoping there is a solution, as this is a great plugin! However at this rate I am going to have to find another. :(


fancyapps commented Feb 19, 2012

  1. About iframe scrolling - that is common problem for mobile browsers, try googling "ios iframe scrolling". For a note - my phone (Dolphin browser) does not support scrolling for any element (iframes, divs) having scrollbars.

  2. Maybe take a look at these issues - #84 #33

@fancyapps fancyapps closed this Apr 20, 2012

funch commented May 4, 2012

I think I still got an issue here. When I'm having an iFrame popup and tries it on my iPhone, I can scroll down and up. No problem.

But it won't show all the content within the frame. Eg. If there is a scrollbar and i scroll down, the bottom-part is hidden. If i zoom out it will become visible again. And when i then scroll up the top-part is hidden, and same procedure with zoom gets visible again.


fancyapps commented May 4, 2012

I can not reproduce this (iOS5.1). What iOS version do you have? Could you show your page?

funch commented May 4, 2012

I'm using iPhone 4s newest 5.1 - check here: http://jfu.dk/testing.html

funch commented May 5, 2012

Annoying. Would you add it like an option as a temporary fix for iOS? E.g. iPhone_fix: true

I have been working on this problem for over a week using iframe, object, and embed. All produce a scroll bar effectively, but the iPad fails to show the whole document past the height given. Many use height of 100%, but this only means 100% of the browser and not the iframe or object. I have tried several methods of jQuiery, but the document does not appear. The only solution is to put the height to 10,000px or an amount larger than the largest document. If the document is so large, simply place a link at the bottom to reload the page to show the menu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment