• Registered: 2015-10-30
  • Posts: 23

Topic: Switching between landscape and portrait view on mobile crops image

If I load my gallery on an iPhone, holding the phone in a portrait orientation, the images look fine. Likewise, if I load the page holding the phone in a landscape orientation (a less likely scenario).

But if I do either of the following:

- load the page holding the phone in portrait mode, tilt the phone into landscape view, then tilt back into portrait mode
- load the page in landscape mode, then tilt the phone into portrait mode

the image ends up getting cropped. Seems as if it is continuing to display it at the proper size for landscape mode, but within the proper sized frame for portrait mode. So it's getting majorly cropped (perhaps 1/4 of the image is visible).

The issue exists on both Chrome and Safari on iOS.

Here's the page I'm testing:
http://www.erikarand.com/juicebox-test

  • Registered: 2015-10-30
  • Posts: 23

Re: Switching between landscape and portrait view on mobile crops image

I'm loading the gallery in an iframe on squarespace.

Please let me know if you need any more info. Thanks!

  • Registered: 2015-10-30
  • Posts: 23

Re: Switching between landscape and portrait view on mobile crops image

When I just load the gallery itself (the index.html file that's generated), the issue doesn't occur. So it may be specific to embedding in an iframe.

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

Re: Switching between landscape and portrait view on mobile crops image

To check whether or not the problem is directly related to the gallery, try loading a different web page into your iframe to see if the same thing happens (the iframe content is cropped on orientation change).

I notice that your iframe has a height of 100%. This means that it will fill its parent container vertically.
Please check that your iframe's parent container has a height set via CSS.
If it does not, then the browser may not be able to determine what the actual height (in pixels) of the iframe should be. (The browser needs to know what the iframe's height should be 100% of.)

Try setting a fixed height for your iframe (for example 600px), at least for testing purposes, to see if this helps.

  • Registered: 2015-10-30
  • Posts: 23

Re: Switching between landscape and portrait view on mobile crops image

Here's the code I'm using to embed:

<div style="position: relative; padding-bottom: 75%; padding-top: 35px; height: 0; overflow: hidden;">
<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style=" position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

I tried changing the height of the iframe, and also of the div. Neither seems to fix the problem, and both mess up the layout of the page in other ways.

I tried replacing the URL of the gallery with another URL, as you suggested, and it doesn't seem to have the same issue. When I switch the phone's orientation the page inside resizes properly to fill 100% of the horizontal space. I can switch back and forth and it resizes properly in both directions. In contrast, with the juicebox gallery, it resizes properly when I switch from portrait to landscape orientation, but when I switch back to portrait, the gallery doesn't resize, instead staying the size it just was in landscape orientation, but cut off / cropped by the iframe.

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

Re: Switching between landscape and portrait view on mobile crops image

As I cannot easily replicate your web page, could you please set up a page identical to your gallery's web page but loading different content (maybe http://www.juicebox.net) into the iframe so that I can compare the two scenarios? Thank you.

It certainly looks like the problem is either with the resizing of the iframe (the right part of the iframe being truncated on orientation change) or the browser not resizing the content correctly to fit the iframe (maybe due to not being able to correctly determine the iframe's dimensions).

I do not know if it will make a difference but you could try using the 'width' attribute directly in your iframe as well as (or instead of) using the CSS 'width' style.
Change:

<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style=" position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>

... to:

<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style="position: absolute; top:0; left: 0;" width="100%" height="100%"></iframe>

Also, try setting the following CSS code in the <head> section of your web page:

<style type="text/css">
body, html {
    width: 100%;
}
</style>

You could also try setting this CSS code in your gallery's web page.

I don't know if any of the above will help but they are certainly things that I would try myself.

  • Registered: 2015-10-30
  • Posts: 23

Re: Switching between landscape and portrait view on mobile crops image

I haven't tried your new suggestions yet, but here's a version of the page that loads juicebox.net into the iframe:
http://www.erikarand.com/juicebox-test2

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

Re: Switching between landscape and portrait view on mobile crops image

Thank you for providing the URL to your test page.

I have done some further investigation and it looks like the problem may somehow be related to the meta viewport tag on your main page.

I have loaded a default full page gallery into an iframe which takes up 80% of the page's width (just an arbitrary value that is not 100% so that any problems can easily be seen).
On changing orientation and then changing it back, there is no resizing and the gallery always fills the iframe and the iframe always fills 80% of the page's width.
Here is the test gallery.

As soon as I introduce a meta viewport tag into the page, such as the one you use in your web page (below), there are resizing problems (not exactly the same as yours but resizing problems nonetheless).

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

I don't know if anything can be done from within the iframe page (the gallery) but one possible workaround would be to refresh the page when the orientation changes. This will reset the page layout each time the device's orientation is changed.
This can be achieved by adding the following JavaScript code on your web page:

<script>
    window.onorientationchange = function() {
        window.location.reload();
    };
</script>

This might not be an ideal fix but it should work.
(The best solution would probably be to embed the gallery directly into your web page and not use an iframe but I realise that this is not possible with a web template site such as Squarespace.)

You might find the following two forum threads interesting.
http://stackoverflow.com/questions/1080 … ion-change
http://stackoverflow.com/questions/7919 … ion-change