Responsive website on iPhone - unwanted white space on rotate from landscape to portrait

Question

I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left

Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.

If you need to see anything further, just me know :)

Gneiss

The problem with providing links rather than code is links die sooner or later. – Leftward

Answer 1

Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.

To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.

Gneiss

This does work, but can cause some strange behaviors scrolling on the mobile device, as well as add a secondary scroll bar if not used within a media query. – Petuntse

If you use overflow: hidden (without the x) it fixes the strange scrolling and added scroll bars (in my case). Hope that helps anyone else who may run into it. – Petuntse

Voting up though I don't recommend this answer. I think once you've identified the element you should size it accordingly, perhaps using media queries. The overflow: hidden feels a bit hacky to me. – Harker

I have used your solution and it works well when I resize my browser, or if I check the same using web based mobile emulators. But, It is not working on my mobile browser. I also tried: @media handheld and (max-width: 481px) { html,body{width:100%;overflow-x:hidden;} } – Overalls

I was having the same issue but with white space at the BOTTOM of the page caused by jQuery's slideDown and slideUp. overflow:hidden on the specific div (body > .container-fluid) took care of it for me. – Tabbie

How to find those elements - jQuery script: $('*').each(function(e) { if ($(this).width() > 320) { console.log("elemnt gefunden - " + $(this).width() + " , id: " + $(this).attr('id') + " class: " + $(this).attr('class')); console.log($(this)); } return true }); – Mafalda

Answer 2

I had the same problem, I fixed it by setting:

html, body { width:100%;  overflow:hidden; }

Protuberate

+1, this worked for me. Only, I would recommend setting overflow-x to hidden and not both overflows because this can disable vertical scrolling as well. – Lantana

it took me so long to find this answer, but it fixed my problem instantly, thank you! – Quibbling

Answer 3

This problem occurs when width of any division is greater than the width of iPAD's screen.

In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.

Swamp

Answer 4

I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.

The following code fixed it for me (can't remember where I got it from at the moment)

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Antifederalist

Thanks for the tip - unfortunately not the right solution in my case :( Still have the white space to the right as soon as the page loads. Funnily enough this extra space doesn't seem to appear on Android devices, so it must be a Mobile Safari bug of some sort... Any further ideas? – Gneiss

sorry that didn't work for you. I'm all out of ideas I'm afraid. – Antifederalist

Answer 5

Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).

Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:

If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:

.control-group .controls {
     overflow-x: hidden
 }

Now the white space on the right was gone :)

Surculose

Answer 6

I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.

Detriment

auto width would make the box remain small size if its contents are small too. what would be better is that you do width:100% & box-sizing:border-box. That would force the paddings to be subtracted from the inside width and not added to the width. – Hammertoe

Answer 7

I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.

Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).

Faythe

Answer 8

I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.

Roussillon

Answer 9

I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.

Newson

Answer 10

Seems as though results are varying for different circumstances but a sitewide

html, body { width:100%; x-overflow:hidden; }

seems to have worked for me!

Theatre

Answer 11

Fixed! Had a similar problem. Fixed it by setting the width to a current device width.

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;
}

Tusk

Answer 12

If you are here for a different, but similar problem, in that there is always white space on the left and right edges in landscape mode,

Make sure you are aware of the "safe area". IE iPhones won't display websites on the edges because the camera could be in front of your website instead of screen. Try adding viewport-fit=cover to your viewport meta viewport tag. E.g. something like this:

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

Atalanti

Answer 13

SOLVED ¡¡

Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.

A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:

width: auto;
overflow-x: hidden;

But this solution is only partial. Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:

width: auto;
overflow-x: hidden;

In my case add to the class "span" these two lines to finally look like this:

[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;

And it´s working now¡¡

Dahlgren