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?

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

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

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.

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

#3:

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

#4:

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)...

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.)

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/

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.

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.

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.

A screenshot showing the error message: