Unfortunately, it is sometimes necessary to change the 'theme.css' file between versions (when bugs are fixed or new features are added). We are aware of this and have tried to make configuring a gallery as flexible as possible (for example with the available configuration options and the use of vector icon fonts) without the need to modify CSS (although I understand that some things may be achieved only with custom CSS).
Perhaps a solution to your problem would be to have your modifications in a separate CSS file and use the !important declaration to ensure that they override the CSS rules from the gallery's own 'theme.css' file.

Juicebox does, indeed, still support older versions of Internet Explorer. IE8 still has a small but not insignificant market-share and we do not want to alienate users by dropping support for older browsers too early.

There is only one version of Juicebox available and, therefore, I am unable to supply you with a version available which does not include support for older versions of Internet Explorer.

Juicebox v1.4.0 has just been released and introduces a new expandedBackgroundColor configuration option so it is now possible to set different background colors for normal and expanded modes. Please see this blog entry for details.

This bug has now been fixed in v1.4.0. Please see this blog entry for details.

This bug has now been fixed in v1.4.0. Please see this blog entry for details.

This bug has now been fixed in v1.4.0. Please see this blog entry for details.

Juicebox v1.4.0 has just been released and should hopefully fix the problems noted above.
Please see this blog entry for details.

Issues (1), (2) and (4) from the original post above have now been fixed in v1.4.0. Please see this blog entry for details.

This bug has now been fixed in v1.4.0. Please see this blog entry for details.

If you want to have a Juicebox gallery on your web page, then there is no option but to include the 'juicebox.js' file (which internally loads the 'theme.css' file). These files are too large to be included inline within a web page and this is not possible anyway as the structure of the 'jbcore' folder must be kept intact for Juicebox to know where its own resource files are located.
Loading the 'juicebox.js' file asynchronously may not work (the 'juicebox.js' file will have to have been fully loaded by the time the browser parses the embedding code <script> block) but if you would like to try it, please take a look at the suggestions in this forum thread.
(Incidentally, entering 'google.com' into Google's own own PageSpeed Insights results in a Mobile Speed result of 64/100.)

@ckukshtel

All gallery files must be hosted on the same domain or subdomain as the HTML page containing the gallery's JavaScript embedding code. This is due to the same-origin policy. Knowing that you are using Shopify and that you are unlikely to be hosting your gallery on Shopify's own web servers, then this is like to be the problem that you are encountering.
Possible solutions would be to use an iframe  (as I mentioned in my post above) or you may be able to implement a Cross-Origin Resource Sharing (CORS) solution: http://www.w3.org/TR/cors/
Try adding the following to the .htaccess file in the root directory of the domain which currently hosts your gallery.

Header add Access-Control-Allow-Origin "*"

This happens because as the size and shape of the user's browser window changes, the aspect ratio of your gallery (specifically the image area within the gallery) changes but the aspect ratio of your main image does not. When using the default value for imageScaleMode (SCALE_DOWN), Juicebox will scale the main image within the image area and if the aspect ratios of the image area and the image itself do not match, then there will be space to the left and right or top and bottom of the image.

This will not work (as you have discovered). If you set your gallery's height to 100% but the gallery's parent container has a fixed height, then the gallery's height will also become fixed (e.g. 100% of 800px = 800px).

If you always want to fill the gallery's image area (so that there is minimal space between the bottom of the main image and the thumbnails), you can set imageScaleMode="FILL". However, your images may be cropped.

If you want your gallery's aspect ratio to always be constant (ie. for your gallery's width and height to both change when the user changes the browser's width), then please take a look at this forum post to see how this can be achieved with JavaScript. However, please bear in mind what whereas this is relatively easy to implement with a standalone gallery on a web page, it may be difficult to incorporate into a Drupal environment.