• Registered: 2012-04-30
  • Posts: 24

Topic: Chrome on iOS

Noticed that Chrome on iOS no longer treats 1.3 as a mobile gallery properly. Instead it zooms out and expands to what seems like the full resolution of the handset.

I double checked v1.2 and that did function closer to Safari version.

Using iPhone 5.

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

Re: Chrome on iOS

For Chrome on iOS devices, you will need to set the viewport on your gallery page using the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • Registered: 2014-07-07
  • Posts: 4

Re: Chrome on iOS

We have this same issue but we already have the viewport tag. Our page loads normally and then when the Juicebox loads, we see the behavior described here.

Example:
http://beta.cincinnatiusa.com/article/6 … s-families

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

Re: Chrome on iOS

@yvetteo

I have just viewed your gallery in Chrome on on iPod Touch running iOS (6.1.6) and it looks OK to me. (The Splash Page is displayed and when it is clicked, the gallery expands fullscreen.)
What device and iOS version do you use? Also, are you able to upload a screenshot somewhere so that I can see what you are seeing?

If you have made any changes to your gallery recently, try clearing your browser's cache before reloading your gallery to ensure that your browser is fetching and using the most recent versions of your gallery files.

Also, try setting expandInNewPage="TRUE" in your gallery's settings. There is currently a bug (which should hopefully be fixed in a future version of Juicebox) whereby setting expandInNewPage="FALSE" can change the scale of the embedding page. This may be a possible explanation for the problem that you are running into.

  • Registered: 2014-07-07
  • Posts: 4

Re: Chrome on iOS

@Steven

Thanks for the quick reply!

We are seeing the problem in iOS 7.1. I haven't been able to test iOS 6 yet. It was seen on 2 iPhone 4S devices. I don't have a lot of devices for testing so I'm not sure about other configurations.

We didn't have expandInNewPage set at all. I tried settting it to TRUE but that didn't fix the problem.

This is how the page loads before the Juicebox comes in:
https://www.dropbox.com/s/83uhrcgc6d9zbvc/before_JB.PNG

And this is after:
https://www.dropbox.com/s/9owvbpor53p96bl/after_JB.PNG

Yvette

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

Re: Chrome on iOS

Thank you for providing the screenshots.
In Chrome 35 on iOS 6 (and in Mobile Safari, too), I see your web page as your 'before' image (not as you see it in Chrome on iOS 7). What version of Chrome are you running? If it is not the latest version, try updating it.
The only way I can make a web page 'zoom-out' in Chrome 35 on iOS 6 is to not use the following <meta> 'viewport' tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Try replacing this <meta> 'viewport' tag with the one which Juicebox now uses in the 'index.html' files generated by JuiceboxBuilder-Pro to see if this helps:

<meta name="viewport" id="jb-viewport" content="minimal-ui" />

Also, I notice that your gallery has a width of 100%. Try temporarily giving your gallery a fixed width (just for testing purposes) to see if this makes a difference (to see if the 100% width is somehow forcing the web page's width to expand resulting in a change to the scale of the web page).

  • Registered: 2014-07-07
  • Posts: 4

Re: Chrome on iOS

@Steven

The problem is in iOS7. You keep referencing that it is fine in iOS6. We are seeing the problem in iOS7 with the latest version of Chrome (downloaded a few days ago).

Our site is responsive. I can't change the width of the gallery because the same code is used for all size devices and monitors.

Yvette

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

Re: Chrome on iOS

I was just confirming that I do not see the problem in either Chrome or Mobile Safari (in iOS 6).

Do you see the problem in Mobile Safari or just in Chrome in iOS 7.1?
(This might confirm whether the problem is specific to Chrome or iOS 7.1 in general.)

Have you tried replacing the <meta> 'viewport' tag as I suggested in my last email?
If so, did it make any difference?

I would still expect the value of expandInNewPage to make a difference (due to the known bug). It certainly makes a difference in my own test galleries (in both Chrome and Mobile Safari).
Please double-check this by setting expandInNewPage="TRUE" and expandInNewPage="FALSE" (at different times) and checking your web page (after clearing your browser's cache) with each setting.

  • Registered: 2014-07-07
  • Posts: 4

Re: Chrome on iOS

@Steven

It was only happening in Chrome. Mobile Safari was fine.

I can't change the meta viewport tag, so I hadn't done that.

I tried your suggestion of setting the expandInNewPage value to TRUE and FALSE to test.

It seems to be fixed now! But it was fixed by using expandInNewPage="FALSE", not TRUE. Your earlier response had said that it should be set to TRUE, but the opposite seems to have fixed it for us. I checked it in iOS6 and iOS7 and both seem to be working. It seems to be ok in all browsers too.

Thanks,
Yvette

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

Re: Chrome on iOS

I am glad that your problem has been resolved. Thank you for posting back to let me know.
(I think it may depend on the <meta> 'viewport' tag being used as to whether setting expandInNewPage to either TRUE or FALSE turns out to be the fix.)
In any case, the developers are aware of this problem and it should be fixed in a future version of Juicebox.
Until then, it would be safer to keep using expandInNewPage="FALSE" (in your case).