• Registered: 2014-09-24
  • Posts: 3

Topic: Embedded juicebox gallery on ipad jumps to top

Hi,

I have a bootstrap one page themed site where I have embedded a juicebox gallery. 
The site renderes OK on Safari/Chrome etc...even the splash page and all work OK from iPhone...but on iPad I have a problem.
When I scroll to the juicebox gallery portion of the site...it automatically forces the page back to the top, I can not see why.

This is some of the basic code of the page for the galleries.

    <span class="breakPoint" id="galpage"></span>
      <div class="section bg-light-grey p-no-top p-no-bottom">
          <div class="container-fluid p-no-left p-no-right">
              <div class="row">
                  <div class="col-lg-offset-1 col-lg-11">
                      <h1 class="text-white" style="font-size: 20pt; padding-left: 25px;">BELETTERING</h1>
                  </div>

              </div>
              <div class="row">
                  <div class="col-md-12 fadeIn wow">
                      <script>
                          new juicebox({
                              baseUrl : "gallery/buildings/",
                              containerId : "juicebox-container",
                              galleryWidth: "100%",
                              galleryHeight: "80%",
                              backgroundColor: "rgba(235,235,235,1)"
                          });
                      </script>
                      <div id="juicebox-container"></div>
                  </div>
              </div>

          </div>
      </div>

You can find some info on the page at
http://www.olivedesign.be/publik/index.html

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

Re: Embedded juicebox gallery on ipad jumps to top

Unfortunately, your web page is rather complex (loading 7 external CSS stylesheets and 17 external JavaScript files) so some trial and error may be required to track down the source of the problem.

Here are a few things to check/try:

First of all, try viewing your web page in both Chrome and Mobile Safari on your iPad to see if the problem happens in both browsers (or just in one of them).

Next, try changing your gallery's height to a fixed pixel value (rather than a percentage) to see if this helps.

Then, try loading jQuery v1.11.1 instead of v2.1.1 into your web page. It should not make a difference but it might be worth trying to see if it does.

If none of the above point towards a solution, then, as the problem may be a CSS or JavaScript conflict, try temporarily removing the external CSS and JavaScript files from your web page (one by one) until the problem no longer exists and a conflicting JavaScript (or CSS) file is found.
If you find a conflicting CSS or JavaScript file, please let me know what it is so that we can investigate further.

  • Registered: 2014-09-24
  • Posts: 3

Re: Embedded juicebox gallery on ipad jumps to top

Thanks for the feedback, I started with the fixed height pixel value and the downgrade of jQuery but to no effect...  Problem remains.
I will keep you posted on progressively removing other CSS and Javascript components to see if this fixes the problem.

Other suggestions, welcome

  • Registered: 2014-09-30
  • Posts: 2

Re: Embedded juicebox gallery on ipad jumps to top

I'm also seeing similar behaviour on a project that I'm working on using juicebox pro.

And you can see a similar thing happening when you view the juicebox lite embedded example at http://www.juicebox.net/demos/lite/embedded/ using an iPad or iPhone. When on the iPad or Iphone, if I use my finger to flick up (e.g. a quick drag then release of finger), the page starts scrolling down but then it gets pushed back to the top.

If, however, I drag without releasing  my finger then i can get to the bottom of the demo page.

- Thanks,
Francois

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

Re: Embedded juicebox gallery on ipad jumps to top

As I am unable to replicate this problem myself, I would appreciate some more information in order to narrow down the possible causes of this problem. (Perhaps the problem is specific to a certain browser under a certain version of iOS.)
If you could answer the following questions, that would be great. Thanks.

(1) What generations of iPad and iPhone do you use and what versions of iOS do they run?
(2) Do you see the problem happening in both Mobile Safari and Chrome or just in one browser? (If you have not yet tried Chrome, please do so to see if this makes a difference.)
(3) Does this happen only in pages with a Juicebox gallery or have you seen this happen in any other scrollable web pages which do not contain a Juicebox gallery?

  • Registered: 2014-09-24
  • Posts: 3

Re: Embedded juicebox gallery on ipad jumps to top

Steven, thanks for the effort...sorry but I didn't have much time last week to work further on this. 
Anyway some initial feedback.

I am testing it on an iPad (on the iphone with splash screen I have no problems) running iOS 8.0 the iPad model is a MD368NF/A (3rd generation iPad) with 64GB mem.
The Mobile Safari I am running on this platform is Safari/600.1.4.

I have checked this with Chrome and here the problem does NOT occur, it works OK.

This appears not to happen in other scrollable pages.

I have updated the iOS version to 8.0.2, but the mobile Safari version remains 600.1.4
And the problem remains.

  • Registered: 2014-09-30
  • Posts: 2

Re: Embedded juicebox gallery on ipad jumps to top

Hi Steven,
  I did some more testing today and here is what I have found:

firstly, here is a video that I took that shows the problem:

https://www.dropbox.com/s/oda2egr0pde6k … 9.MOV?dl=0

The video shows the problem occurring on safari with my iPad air running IOS 8.02
I can also duplicate the problem with safari on my IPhone 6 which is also running IOS 8.02

I also did some testing with other IOS devices:

* iPad Mini with retina running IOS 7.1.2: no problems.
* iPad first gen running IOS 5.1.1: no problems
* running chrome all above devices: no problems.

So it seems the problem is limited to Safari on IOS 8.

Hope that helps
Francois

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

Re: Embedded juicebox gallery on ipad jumps to top

@ErikC & rounders

Thank you both for the additional information.
It looks like the problem is unique to Mobile Safari in iOS 8 (or at least iOS 8.0.2).
I have notified the developers of this and they will investigate further.

  • Registered: 2014-10-24
  • Posts: 6

Re: Embedded juicebox gallery on ipad jumps to top

Is there anything new to this problem... now since most people are updated to Mobile Safari in iOS 8, this problem occurs on all sites I am using juicebox pro on ... is there any workaround? My clients are really disapointed, because their websites aren't usable anyhow...  any person who can't scroll the page leaves the site...

Thank you for any help!

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

Re: Embedded juicebox gallery on ipad jumps to top

This issue has now been logged as a bug and it will hopefully be fixed in the next version (although I do not know when it will be released). Unfortunately, I do not know of a workaround at the moment.

  • Registered: 2014-10-24
  • Posts: 6

Re: Embedded juicebox gallery on ipad jumps to top

Ok, but what bug is it? And is it really only a bug on safari side? Where ecactly does it come to problems... I'm really having trouble, because I'm using juicebox pro on 4 systems right now - and all my clients are complaining about the same problems (these ones mentioned here) since a few days...

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

Re: Embedded juicebox gallery on ipad jumps to top

Ok, but what bug is it?

When scrolling down a web page which contains a Juicebox gallery in Mobile Safari in iOS 8, the page jumps back up to the top.

And is it really only a bug on safari side?

Yes. The bug affects only Mobile Safari (and not Chrome) and only in iOS 8 (and not iOS 6 or iOS 7).

As noted above, this issue has been logged as a bug and it should hopefully be fixed in the next version. Unfortunately, at the moment, I do not know of a workaround or when the next version will be released.

13 Reply by amadeus77 (edited by amadeus77 2014-10-27 14:52:23)

  • Registered: 2014-10-24
  • Posts: 6

Re: Embedded juicebox gallery on ipad jumps to top

When scrolling down a web page which contains a Juicebox gallery in Mobile Safari in iOS 8, the page jumps back up to the top.

I know what is happening... But because of which bug of wich propety in safari (maybe viewport height?)... where is the conflict with JB? Should I now "kill" all JB galleries on the pages? The problem is not, that some images are not shown... the problem is, that all pages containing a juicebox are not viewable / usable anymore ... Does this also happen when I will turn to just "splash modes"?

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

Re: Embedded juicebox gallery on ipad jumps to top

But because of which bug of wich propety in safari (maybe viewport height?)... where is the conflict with JB?

Unfortunately I do not know the exact cause of this problem. This is one for the developers to investigate further.

Does this also happen when I will turn to just "splash modes"?

I do not have an iOS 8 device on which to test but you could certainly try.
This demo gallery uses a Splash Page by default: http://www.juicebox.net/demos/pro/splash/
If you find that this is a suitable workaround, then you can force a gallery to use a splash page by setting showSplashPage="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section). (Other Splash Page Configuration options can be found here.)

  • Registered: 2014-10-24
  • Posts: 6

Re: Embedded juicebox gallery on ipad jumps to top

Ok, I think I will walk alone from here with this problem... thank you... Will you please post a message here when you know if the bug was fixed for safari?

Another thing - don't know what's wrong... using juicebox for a long time now with never having problems...

I do not have an iOS 8 device on which to test but you could certainly try.

I only have ios8 devices for testing at this time and another client (with ios7 - iphone) reported a bug when expanding a SplashPage gallery. He only sees a blank page... I updated to the last juicebox version but the problem still occurs...

It's on http://www.arch-pro.de

tip the Logo on black - scroll down to "Tresoro" - tip the image - scroll down to the juicebox splash page and try to open... do you see the expanded juicebox gallery or just a blank screen?

Thank you one more time for helping me!

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

Re: Embedded juicebox gallery on ipad jumps to top

Will you please post a message here when you know if the bug was fixed for safari?

Yes. When a new version is released, I go through the forum and post in threads relating to bugs which have been fixed.

He only sees a blank page...

do you see the expanded juicebox gallery or just a blank screen?

On an iPod Touch 4 running iOS 6.1.6, the gallery displays and functions fine in both Chrome and Mobile Safari when tapping the Splash Page. There are a few things you can try, though, which may make a difference and help the gallery to run under iOS 8.

(1) If possible, try using only alpha-numeric characters in your configURL's query string (or escape other characters such as double-quotes).

(2) Your dynamically-generated XML file is not seen by the browser as an XML file.
If it is a PHP script, then try adding the following code to set the file's header correctly:

<?php
    header("Content-type: application/xml");
?>

(3) Try setting all the configuration options in your embedding code as strings (rather than booleans or integers). For example, try changing:

thumbSelectedFrameWidth : 5,
showPreloader : false

.. to:

thumbSelectedFrameWidth : "5",
showPreloader : "false"

(4) The imageURL, thumbUrl and linkURL entries in your XML file use absolute paths using the http://arch-pro.de/ domain but the web page is on (and redirects to) the www subdomain (http://www.arch-pro.de/). Try setting all absolute paths to use the www subdomain (so that all gallery files are on the same domain as the page containing the embedding code).

(5) Make sure that your client is viewing the gallery over wi-fi and not a 3G or 4G connection.
If a 3G or 4G connection is being used, then this can result in a blank area where the gallery should be.
Please see this FAQ for more details and a solution to the problem.
Why can't I view my gallery on a 3G mobile connection?

(6) Check the code on your web pages with the W3C Markup Validation service and fix any errors reported.
HTML errors can often result in unpredictable and inconsistent results in different browsers.

(7) It looks like you may have renamed your gallery's 'jbcore' folder. Try uploading the complete stock Juicebox-Pro 'jbcore' folder to your web server (without renaming it or changing its structure) and load the 'juicebox.js' file from within it.

(8) Try changing the value of expandInNewPage which will change how the gallery expands from the Splash Page (and Expand Button). Possible values are AUTO (default), TRUE and FALSE. Please see here for more details.

Hopefully one of the suggestions above will help. Most of them should be fairly quick and easy to try.
All of the above may not be relevant or make a difference but, at present, it is everything I can think of that I would try for myself.

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

Re: Embedded juicebox gallery on ipad jumps to top

The bug referred to above (whereby scrolling down a page containing an embedded gallery on an iOS 8 device jumps to the top of the page) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.