Try fixing the HTML errors on your web page. (There are not too many so it should not take long but the errors that currently exist may be causing problems.) Different browsers may be more tolerant towards errors than others.
This may or may not help but, even if it does not, once the errors are fixed, your web page should be rendered with greater predictability and consistency across different browsers and we can then eliminate HTML errors as being a possible cause of your problem.
You can check the code on your web page using the W3C Markup Validation Service and then fix the errors reported.

Also, rather than load your gallery into an iframe whose dimensions look to be set dynamically by JavaScript, you might like to try embedding your gallery directly into your web page by following the baseUrl embedding instructions here.

You could also check to see if your problem happens just in Mobile Safari or in Chrome, too.

This sounds like you may be viewing your gallery over a 3G/4G connection (rather than wi-fi). If this is the case, then please see this FAQ which has a solution: Why can't I view my gallery on a 3G mobile connection?

I see the problem in your mobile.grantsymon.com site and I have been able to replicate the problem in a test gallery of my own using the configuration options that your galleries use.

The problem seems to be with the combination of the following two options:

backButtonUseIcon="TRUE"
backButtonHAlign="CENTER"

I have logged a bug report with the developers and this should hopefully be fixed in the next version of Juicebox-Pro.
In the meantime, workarounds would be to either set backButtonUseIcon="FALSE" (and use backButtonText to set text or a custom image instead) or to set backButtonHAlign to either "LEFT" or "RIGHT".

That's not a problem. I have created my own test gallery for the bug report.

Leaving the backButtonUrl empty will go back one page in the browser's history when the Back Button is clicked.
You can set the backButtonUrl to a specific page using either an absolute path, e.g.:

backButtonUrl="http://www.example.com/gallery/index.html"

... or a relative path (relative to the web page containing the gallery's embedding code), e.g.:

backButtonUrl="index.html"

If you want the Back Button to go back a level, you can use:

backButtonUrl="../"

... and the browser will load the default web page in the gallery's parent directory.

You could certainly set the backButtonUrl to use a path starting with a leading slash (to denote your root directory).
This should work on whatever domain (or subdomain) the gallery is on.
However, this will work only within the iframe.

You could perhaps attach a custom click handler to the Back Button icon class and load the URL (starting with the leading slash to work on both your subdomains) as the 'top' window (replacing the iframe and its parent page) using JavaScript.
You could try using embedding code such as the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    // Give your 'juicebox' object a variable name (in this example 'jb') so that you can refer to it later
    var jb = new juicebox({
        containerId: 'juicebox-container',
        backButtonPosition: 'TOP',
        backButtonUseIcon: 'TRUE'
    });
    // Attach the click handler to the Back Button icon class when the gallery is ready
    jb.onInitComplete = function() {
        $('.jb-go-back').click(function() {
            // Load the URL as the 'top' window (replacing the iframe and its parent page)
            window.top.location.href = '/e/';
        });
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Hopefully you will be able to implement this within your project.