1 (edited by Ann 2021-07-11 20:26:27)

Topic: Home Button gets hidden and replaced by an X on Apple's iPads

I have the Juicebox Home Button configured to return from a Gallery back to my main Site Index page.

This works perfectly in both Safari and Firefox on any Mac computer.

However, on an iPad (running on iOS) my Home Button is being replaced by an iOS "X" icon which takes the User back to the Index for that particular gallery instead of to my Site Index page.

Is there any way to recode this behaviour, perhaps through Adobe Dreamweaver?

This is my web site:
https://shelbourne-america.net/index.html

If you click on any of the names of my Linked Galleries, you will see that the Back/Home Button works perfectly in any computer (as shown in the attached Screen Shot) but that button gets replaced by an iOS "X" on an iPad.

Post's attachments

Screen Shot 2021-07-11 at 4.17.58 PM.png
Screen Shot 2021-07-11 at 4.17.58 PM.png 737.82 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Home Button gets hidden and replaced by an X on Apple's iPads

I've just checked your Song Birds of Costa Rica gallery (the same one shown in your screenshot) in Mobile Safari on an iPad 2 running iOS 10.3.3 and the Back Button displays and functions correctly (see screenshot below).

I've also checked on an iPhone 7 running iOS 14.6 and the Back Button displays and functions correctly there, too.

I'm not sure what the problem is but the gallery files on your web server seem to be fine and everything seems to be working as expected on the devices I have tested on.

Try completely clearing your browser's cache before loading your website to see if this clears the problem.

Post's attachments

Screenshot.jpg 71.91 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

3 (edited by Ann 2021-07-12 19:53:42)

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Steven:
Thank you so much for checking on this for me.
I did follow your suggestion to trash the Cache for Safari on my iPad but unfortunately doing that hasn't removed iOS's insertion of an X in place of my Back/Home button.

Are there any other Caches which I should clear?

I see that there is an iOS update (how I hate iOS!) to iPad 14.06 available and I am about to install it to see if it helps.

If that fails, would changing the Config HTML for the Galleries to:
Position back button at "Top", "margin-left=40px" do anything useful such as providing a new placement position for the back button which is clear of Apple's X icon?

Post's attachments

Screen Shot 2021-07-12 at 3.51.49 PM.png 797.6 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Are there any other Caches which I should clear?

If you have not yet done both of the following, then please try:

(1) Settings -> Safari -> Clear History And Website Data

(2) Settings -> Safari -> Advanced -> Website Data -> Remove All Website Data

If that fails, would changing the Config HTML for the Galleries to:

Unfortunately, there's not much else I can suggest. The code for your gallery looks fine and I cannot reproduce the problem on 3 separate Apple devices running 3 different versions of iOS (iPhone 5S iOS 12.5.4, iPad 2 iOS 10.3.3, iPhone 7 iOS 14.6).
The problem seems to be unique to your own iPad (rather than with the code for the gallery). If there was a problem with the code (or gallery settings), then I should be able to see the problem on my own devices.

You could certainly try changing the Back Button's position in your gallery's settings to see if this makes a difference.
Try setting backButtonHAlign="CENTER".
By doing this, you will at least be able to tell at a glance if your gallery's current 'config.xml' file is being used or if an older cached version is still in use. This might help to determine whether or not the cache has been completely cleared.

Also, maybe you could try viewing your gallery in a different browser (at least for testing and troubleshooting purposes).
Do you still see the broken Back Button if you view your gallery in Mobile Chrome?

Perhaps you could post a screenshot of the gallery on your iPad so that I can see what you are seeing.
I'm not sure that this will help but maybe I'm missing something that will become obvious when I see it.
Thanks!

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Steven:

You were completely correct!

I have been testing this issue a bit more and the problem seems to emanate from just my copy of Safari on that particular iPad. Trashing the Caches had no effect and iOS prevents one from trashing and then re-installing Safari (which is what I would normally do with any other app. in similar circumstances!).

I installed Chrome and my web site displays correctly in that (as it does on an IPhone 8 and in two different computers.

My main concern was that the lack of a visible Back/Home button would prevent the Site from working properly for its visitors but, as it seems that they are unlikely to see the issue on their devices, I am not going to worry about it any more.

Thank you so much for all of your efforts to try to fix this problem but, apart from me buying a new iPad, it seems to be unfixable.

Ann

Re: Home Button gets hidden and replaced by an X on Apple's iPads

I presume the problem occurs with the Back Button in all your galleries (even though they all use their own individual 'jbcore' folders).

Out of curiosity, does the problem also occur with the Back Button in this demo gallery on our own website?
https://juicebox.net/demos/pro/full/

I guess one possible solution might be to backup all your apps and personal data and perform a clean install of iOS 14.6 (and then restore your data afterwards). That should fix the problem but it's a pretty drastic measure to take and I can't even guarantee that it would work. I'd be hesitant to do this myself.

It's certainly an odd problem and one which I can't quite wrap my head around (let alone reproduce).
If I think of anything which might help, I'll be sure to post back here.

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Steven:

Thank you for continuing help.

I have continued to gnaw on this bone:

Your suggestion to “Center” the Back/Home button is certainly an effective way to get around the display problem in Safari on my iPad.

Chrome and Firefox actually have no difficulty in displaying the Juicebox Builder Pro Galleries with the Home/Back Button on the Left.

Safari (on an iPad Pro) is the odd-one-out — although it doesn’t throw an X instead of the Back-button on my iPhone 8 or my Macs (which are running on Mojave & Big Sur respectively).

I have discovered that if I do a “Long-Press” on Apple’s X icon, it opens a contextual menu which lists the Site’s home page URL at the bottom of the list; but how many iPad Users will ever discover that?!

A normal short press on the X merely takes the visitor back to the Gallery’s Splash Page.

I did look at your sample demo Galleries and there is no problem with the way that Safari displays those.

The difference may be because I am using my index.html file to host a great many links to individual Galleries?

I have re-made the first row of Galleries in my web site so can see that Centered button-placement works very nicely in an iPad on Safari — and it also looks OK in Chrome and Firefox as well.

I use iPower to host my Site and I am fairly sure that they don’t do anything strange which might affect the way that their Server delivers content to the Internet.

Hoping that these additional notes may be useful,

Ann

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Thank you very much for the additional information.
It's definitely very odd that the problem has only been seen in your own galleries in Mobile Safari on your own iPad.

The difference may be because I am using my index.html file to host a great many links to individual Galleries?

This should really not make any difference at all (and I can't actually see how it could make a difference).
However, as you are already aware, until we know what is causing the problem, we can't rule anything out.

I use iPower to host my Site and I am fairly sure that they don’t do anything strange which might affect the way that their Server delivers content to the Internet.

I agree. I do not think that your server is part of the problem. A Juicebox gallery really does not have much in the way of server requirements. A Juicebox gallery is basically just a collection of HTML, CSS and JavaScript files with a few other resource files (font and image files) and pretty much any regular web server should be able to handle this. (Only the Download Button and Password Protection require further requirements: PHP 5.2.0 or later.)

The icons in a Juicebox gallery are characters in a custom font. If there was a problem with the font files, then I'd expect all the icons (not just the Back Button) to be showing up as an 'X'.
As I was never able to see the problem for myself (even on my own iPad) and as the Back Button displays correctly when centered, I think we can definitely rule out corrupt font files as a possible cause.

I would still like to see the problem for myself (even if I can't experience it) so, if possible, please post a screenshot of the mysterious 'X'.

Maybe it's a really rare bug which just manifests itself in one particular browser on one particular device under a certain combination of gallery configuration options. It seems unlikely but not impossible.

I have uploaded a test gallery using exactly the same configuration options that you do (and the same version of Juicebox). I've copied the configuration options from your Hummingbirds gallery which still has the Back Button to the left. The only thing I've changed are the images so you'll not see an image on the Splash Page but the Back Button should display correctly and redirect to your site index.
Please take a look at this gallery and let me know if you see the Back Button or an 'X'. Thank you. (I'll take the gallery down after you've seen it.)

[Test gallery removed.]

9 (edited by Ann 2021-07-20 17:04:12)

Re: Home Button gets hidden and replaced by an X on Apple's iPads

I opened your Test File in Safari on my iPad and the X displayed instead of the Home/Back icon when I opened the Gallery:

[img]/Users/ann/Desktop/iPad screenshots/IMG_0342.PNG[/img]

Click the X goes back to the Gallery Splash Page:

[img]/Users/ann/Desktop/iPad screenshots/IMG_0343.PNG[/img]
A "Long-Press" in the top left corner of the screen then opens this Contextual Menu:

[img]/Users/ann/Desktop/iPad screenshots/IMG_0345.PNG[/img]

My thought is that Safari may not be recognising the JuiceBox Home Button as being present when that button is paced in the Top Left position; and is therefore over-writing the JB Home-icon Button with a Safari X icon?

I also opened your Test Gallery in Firefox on my iPad with the result that it behaved exactly as expected: it displayed the JB Home icon and returned to the Shelbourne-America Home page when I clicked the Back Button:

[img]/Users/ann/Desktop/iPad screenshots/Screenshot 2021-07-20 at 11.35.33 AM.png[/img]

I suppose that I could strip iOS completely from my iPad and get a fresh Install from Apple (if that is even possible?); and then re-install all of my personal data from a Back-up?

However, that is a lot of work if I am the only person on the Planet who is experiencing this strange Safari behaviour on an iPad!

One thought is that Safari might be looking for a standard font's Back Button icon for the top-left position on any web-page and is not recognising the JB Custom font for that purpose?
But, if that is the case, why does Safari display and activate the JB Back Button correctly on an iPhone?

My Index.html (Home Page) is encoded with <meta charset="UTF-8"> but, in addition to the regular Sans Serifs, I am using Adobe EdgeFonts on my web page but that shouldn't make any difference?

--------

I have just noticed something in my html coding which might be upsetting Safari:
I had TWO Head sections in the file!
I am revising it and will upload the revision shortly and see if that makes a difference.

10

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Images are not Posting?

Apparently, they needed to be smaller?!!

[img]/Users/ann/Desktop/iPad screenshots/results/IMG_0342.jpg[/img]

[img]/Users/ann/Desktop/iPad screenshots/results/IMG_0343.jpg[/img]

[img]/Users/ann/Desktop/iPad screenshots/results/IMG_0345.jpg[/img]

[img]/Users/ann/Desktop/iPad screenshots/results/Screenshot 2021-07-20 at 11.35.33 AM.jpg[/img]

Post's attachments

IMG_0342.PNG
IMG_0342.PNG 832.61 kb, 1 downloads since 2021-07-20 

You don't have the permssions to download the attachments of this post.

11

Re: Home Button gets hidden and replaced by an X on Apple's iPads

[img]/Users/ann/Desktop/iPad screenshots/results/IMG_0343.jpg[/img]

12

Re: Home Button gets hidden and replaced by an X on Apple's iPads

#2:

[img]/Users/ann/Desktop/iPad screenshots/results/IMG_0343.jpg[/img]

Post's attachments

IMG_0343.PNG
IMG_0343.PNG 46.45 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

13

Re: Home Button gets hidden and replaced by an X on Apple's iPads

#3:

/Users/ann/Desktop/iPad screenshots/results/IMG_0345.jpg

14

Re: Home Button gets hidden and replaced by an X on Apple's iPads

#3:
Image Insertion is mighty complicated with this UI!!!

Post's attachments

IMG_0345.PNG
IMG_0345.PNG 153.72 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

15

Re: Home Button gets hidden and replaced by an X on Apple's iPads

#4:

Post's attachments

Screenshot 2021-07-20 at 11.35.33 AM.jpg 354.15 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

16 (edited by Ann 2021-07-20 17:45:27)

Re: Home Button gets hidden and replaced by an X on Apple's iPads

#4 again!

My difficulty was not understanding that I can only add one image at atime; and that I need to us "Post Reply" and not the more obvious "Quick Reply" box to do it. Oh well . . . .!!

Post's attachments

Screenshot 2021-07-20 at 11.35.33 AM.jpg 354.15 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Thank you so much for going to the trouble of posting screenshots (and for persevering with the forum software to do so!).

It is very interesting to see the cross that you are talking about.
It is curious to see that the cross and its background are not the same size as the Juicebox Back Button.
I suspect that the cross is actually covering up the Juicebox Back Button rather than replacing it.

Unfortunately I cannot update iOS on my old iPad 2 to test my theory but I suspect that the cross might actually be a feature of a later version of iOS on the iPad.

When you expand your gallery from the Splash Page, your gallery expands to fill the entire viewport, using the Fullscreen API (your gallery sets useFullscreenExpand="TRUE").
It looks to me like the cross might be Mobile Safari (on iPad only) presenting a way for the user to exit fullscreen mode.

This would explain why you do not see the cross in our demo galleries (they are not fullscreen, just full browser) and why I do not see the cross on my own iPad (it's too old).

It does not look like a coding fault (everything looks OK as far as I can tell) or even a fault of any kind. The cross looks intentional, like it's meant to be there (rather than an indication that something is wrong).

If my theory is correct, then if you set useFullscreenExpand="FALSE", you'll not see the cross.

Bingo!
https://dgrin.com/discussion/265876/ipa … e-x-button

Unfortunately, I've not found a way to disable the cross. (I'm not sure it's possible.)
It looks like the best course of action would be to either keep your BackButton centered or set useFullscreenExpand="FALSE".

Just to clarify a couple of your other points (which might now be somewhat redundant)...

I suppose that I could strip iOS completely from my iPad and get a fresh Install from Apple (if that is even possible?); and then re-install all of my personal data from a Back-up?

Yes. You can download the relevant iOS images from https://ipsw.me
The downloads come directly from Apple's update servers. (You'd need to back up your personal data first and it's a long process... not just a quick 5-minute job.)
You'll not need to do this, though. (It won't make a difference.)

I have just noticed something in my html coding which might be upsetting Safari:
I had TWO Head sections in the file!

It is certainly a good idea to fix any HTML errors in your web pages.
Some browsers may be less tolerant towards errors than others and a web page whose code validates correctly will be displayed with greater consistency and predicability across different browsers.
You can check your code with the W3C Markup Validation Service (and then fix any errors reported).
https://validator.w3.org/

18

Re: Home Button gets hidden and replaced by an X on Apple's iPads

You are a brilliant Sleuth!

I made further Searches and found a number of other Posts on this subject — including one which stated that:
Apple has no plans to change the situation (with their ugly and disruptive X) in the foreseeable future.

So I guess that the API is the only answer although there apparently are problems using it on iOS Safari for iPads
(which, of course ,is exactly where it is most needed!).



I am busily trying to get my head around the extensive notes from GitHub and will try to implement their code — once I can learn exactly what code to put where.

https://developer.mozilla.org/en-US/doc … PI#methods

It is interesting that the X only appears on the newer iPads because I was fairly sure that the X was something new.  Certainly, I had never noticed it until now.

You provided the answer: it only happens on the newer iPads and I had to replace my old iPad with a newer one  quite recently.

Post's attachments

Screen Shot 2021-07-21 at 3.41.52 PM.png 185.82 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Home Button gets hidden and replaced by an X on Apple's iPads

There are browser-specific compatibility notes for the Fullscreen API here: https://caniuse.com/fullscreen

If you hover over "Safari on iOS",  "14.7" (released a couple of days ago), you'll see the following note, which seems pretty conclusive that there's no way to disable the cross.

Partial support refers to supporting only iPad, not iPhone. Shows an overlay button which can not be disabled.

It looks like the two best (and easiest to implement) workarounds would be to either:
(1) Not show the cross, by not implementing the FullScreen API when expanding the gallery from the Splash Space (by setting useFullscreenExpand="FALSE").
... or:
(2) Move the Back Button (e.g. backButtonHAlign="CENTER") so that the cross does not obscure it.

I hope one of these suggestions is suitable for your galleries.

20

Re: Home Button gets hidden and replaced by an X on Apple's iPads

My thinking too!

I will probably move the JB Home Button on all my existing Galleries to the centre position anyway; and then experiment with the html solution after that.

I have already created a new Gallery Preset (with the button centred) for future use.

It occurs to me that you might want to include a new standard Preset (with a centred Home/Back button) for your future customers?

Thank you so much for your extremely valuable input which has certainly helped me enormously — as does your excellent JuiceBox software on a very regular basis!

Re: Home Button gets hidden and replaced by an X on Apple's iPads

It is unfortunate that Apple see the need to overlay their 'Exit Fullscreen' button on top of the web page (with no way to disable it), obscuring what might be underneath it, when other browsers (e.g. Mobile Chrome) manage not to do this on the same platform.
Maybe they'll allow a way to hide the button in the future (or decide to remove it in preference to a different solution).

This is not the first time that Apple have tried to improve the fullscreen experience in Mobile Safari, only to backtrack later on.
Apple introduced the 'minimal-ui' meta tag in iOS 7.1 (as a way to remove the toolbars from the browser viewport) and web developers (including ourselves) adopted this practice at the time. However, Apple then decided to remove support for 'minimal-ui' in iOS 8. Try a web search for 'minimal-ui' for more information.

You can set Juicebox configuration options in the embedding code (please see here for details) so, with a little custom JavaScript code, you could specifically target the iPad and set a particular configuration option to a certain value, depending on whether or not an iPad is being used to view the gallery.

As an example (just to clarify), you could use backButtonHAlign="CENTER" for the iPad and backButtonHAlign="LEFT" for all other devices.

Options set in the embedding code take precedence over those in the configuration file ('config.xml').

Here's an example:

<script src="jbcore/juicebox.js"></script>
<script>

    function isIPad() {
        var userAgent = window.navigator.userAgent;
        return (userAgent.match(/iPad/i));
    }

    var customPosition = isIPad ? 'CENTER' : 'LEFT';

    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222",
        backButtonHAlign: customPosition
    });
</script>
<div id="juicebox-container"></div>

You could do likewise for useFullscreenExpand (or any other configuration option) if you like.

If you wanted to target only Mobile Safari on the iPad and not other browsers like Mobile Chrome, then the JavaScript detection code would get rather messy as the user agent strings for Mobile Safari and Mobile Chrome are very similar to each other.
Take a look at this thread for inspiration.

22 (edited by Ann 2021-07-22 22:52:15)

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Thank you for all of your help and the script too.

Unfortunately, I can't save the changes which I tried to make into a new Config into an xml which JuiceBox can read.

The attached file is what I attempted but it doesn't seem to work.

I did read all of your notes but I obviously don't understand the correct way to edit  or create a new Config.

Post's attachments

config.xml 1.37 kb, 1 downloads since 2021-07-22 

You don't have the permssions to download the attachments of this post.

23

Re: Home Button gets hidden and replaced by an X on Apple's iPads

A screenshot showing the error message:

Post's attachments

Screen Shot 2021-07-22 at 4.22.26 PM.png 656.04 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Home Button gets hidden and replaced by an X on Apple's iPads

To implement my suggestion, you'll need to modify the JavaScript embedding code in your gallery's HTML web page. (You can't add HTML or JavaScript code to the gallery's XML file which is why you need to insert the conditional configuration option into the embedding code instead.)

For example, for your 'Song Birds Of Costa Rica Gallery', you'll need to edit the web page into which the gallery is embedded, i.e.:
https://shelbourne-america.net/Birds_CostaRica/index.html

Then, you'll need to change the following embedding code (starting at line 24) from:

<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(204,204,204,1)'
    });
</script>

... to:

<script src="jbcore/juicebox.js"></script>
<script>

    function isIPad() {
        var userAgent = window.navigator.userAgent;
        return (userAgent.match(/iPad/i));
    }

    var customPosition = isIPad() ? 'CENTER' : 'LEFT';

    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(204,204,204,1)",
        backButtonHAlign: customPosition
    });

</script>

You can leave the entire 'juicebox-container' <div> (below the code above in your gallery's web page) completely unchanged.
Just change the code noted above and all should be well.

25 (edited by Ann 2021-07-23 20:33:26)

Re: Home Button gets hidden and replaced by an X on Apple's iPads

Ahhh — NOW I finally understand!

Sorry, to have been so thick yesterday.

I inserted the text in a test file on the Site and you can get to it here:

https://shelbourne-america.net/Bronx_Zo … index.html

Pressing the Home Button (now centred!) will return you to my Landing Page where you will see a Link to "Lemurs, Bronx Zoo" (near to the bottom of the RHS column).

That link is to the file in its original form (before I changed the Script in the HTML code in the TEST version).

The newly coded file does work on the iPad in that the Back Button is the JB one; it is centered; and Apple's Horrible X has been obliterated!

However, the trade-off on a large-screen computer is that the images in a Gallery will no longer fill the Browser window (as you will see that they do in the original link to "Lemurs, Bronx Zoo" on the Landing-page.

It is probably not possible to further refine the Script to say, in effect:
"Ignore the Script unless the User is using Mobile Safari on a newer iPad" ?!!

Maybe the best answer is for me to simply change the Gallery Preset to use my new Preset (which is set up to center the Back-button); and leave Visitors, who use Safari on one of the newer iPads, having to endure seeing an Apple-X in the top left corner?

You have been enormously helpful — and extremely patient too. 
As a result, i have learned so much from this event!!