• Registered: 2015-11-18
  • Posts: 3

Topic: Problem with juicebox embed on ipad

Hi,

I'm having trouble with juicebox galleries on an iPad, specifically when embedded on a webpage. Have a look at this example here:

http://studeo-digital.s3.amazonaws.com/ … index.html

For some reason, the gallery loads up fully on an iPhone or desktop, but specifically will not be fully visible on an iPad. Any suggestions would be appreciated. I have played with changing the values on imagescalemode but it doesn't seem to help.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Problem with juicebox embed on ipad

If possible, please upload a screenshot so that I can see what you are seeing on your iPod.
The layout might be similar to what I see when I view your gallery in a desktop browser (the gallery being displayed to the right-hand side of the browser window).
The iframe your gallery is loaded into is nested within several parent containers and you may need to check the CSS of these divs.
(It looks like your web page may be designed for a specific device or browser width.)

To see if the problem is directly related to Juicebox or not, try loading a different page into your iframe.
Try loading something like http://www.google.com into your iframe rather than your gallery's 'index.html' page to see if the same layout problem happens on you iPod.

  • Registered: 2015-11-18
  • Posts: 3

Re: Problem with juicebox embed on ipad

Thanks - its definitely related to juicebox as when I put in any other iframe or image slider (and i've tried many different sites/pages) its a non issue. Here's an image for you to view of what I see on my ipad

https://s3.amazonaws.com/uploads.hipcha … 0%20AM.png

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Problem with juicebox embed on ipad

That certainly sounds strange. The height of your iframe should be consistent on your web page (and determined either via CSS or by the iframe's 'height' attribute) no matter what content is loaded into the iframe.
Ordinarily, the content of the iframe should not change the layout of the parent page unless there is specific JavaScript code designed to do so and Juicebox does not contain any such code.

Your gallery looks to be a standard 100% x 100% gallery so it should fill the iframe and there is little you can do on the gallery side to change things.

From your screenshot, it looks like your gallery is filling the iframe (and everything seems to be correctly vertically centered on the page) but the iframe is not tall enough for the complete content of the page to fill your iPod browser window.
The problem seems to be with the height of the iframe on your main page.

I do not know how the height of your iframe is calculated (your web site is rather complicated).
Maybe it is looking at the content of the iframe and trying to determine the height required. Perhaps a gallery with 100% height is somehow difficult for your JavaScript code to figure out how tall the iframe should be.
Check the code that sets your iframe's height to see if you can spot any potential problems with it.

Also, please check to see if you see the same problem in Mobile Chrome that you see in Mobile Safari.
Thank you.

  • Registered: 2015-11-18
  • Posts: 3

Re: Problem with juicebox embed on ipad

Thanks Steven - it seems that it's only a mobile safari issue on an iPad (not an issue on safari on iphone!) and doesn't occur on chrome on iPad either - does that provide any clue as to what is going on?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Problem with juicebox embed on ipad

Please let me know what generation of iPad you have and what version of iOS you are using.
If possible, try upgrading to a more recent version of iOS.

Also, try a web search with terms such as "iframe iPad Mobile Safari". I do not know if any of the problems that crop up are directly related to your own problem but there are certainly other users who seem to be experiencing iframes which are not behaving as expected in Mobile Safari on iPads. One of the top search results might help or at least point you in the right direction.

Another thing that might help is rather than setting a percentage height for your iframe, you could perhaps use JavaScript to determine the actual required height of the iframe in pixels (depending on the size of the user's browser window) and then set the iframe's height to this pixel value dynamically using JavaScript and CSS.