136

Our webpage background images are having problems in FireFox as well as Safari in iOS on iPads/iPhones with white space showing up on the right side of the page.

The background images extend fine on other browsers but we're having difficulty not extending the full length of the browser on those browsers.

Take a look at our site on FireFox to see what I mean.

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
Dave
  • 1,385
  • 2
  • 9
  • 3
  • 1
    If you are using a framwork like bootstrap or foundation, check that now column is the first child of body, but nested in another div that has some sort of padding (small-12 f.e.). – Lightningsoul Nov 16 '16 at 13:10
  • 1
    have u solved it out @Dave? – gumuruh Mar 14 '17 at 16:58
  • 1
    Crazy, isn't it. 6 years later, and iOS Safari is still showing this problem. I tried numerous CSS solutions, but eventually had to resort to using jQuery. https://stackoverflow.com/a/45009357/391605 – Mike Gledhill Jul 10 '17 at 10:17

12 Answers12

337

I added:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

into your CSS at the very top above the other classes and it seemed to fix your issue.

Your updated .css file is available here

Rion Williams
  • 74,820
  • 37
  • 200
  • 327
  • 7
    awesome, that just fixed a bug for me that's been bothering me for a while! – gleddy Aug 18 '11 at 17:56
  • 28
    I had a problem with scrolling on safari iphone with this code, it became very slow. I found in the end it was the combination of height: 100% and overflow-x: hidden, so I removed height: 100% and it works much better. – Paul Mason Jul 11 '12 at 18:28
  • 1
    Thanks this worked like a charm. I always wondered how to get ride of the almost infinite scroll bar. Not sure why this hasn't been marked as a answer. – isurfbecause Aug 20 '12 at 21:33
  • Worked perfectly on my project that utilizes a lot of background-color properties. – Matt Jensen Dec 11 '12 at 19:58
  • 8
    I found that bootstrap's 'row' class was giving a {margin-right:-15px} which was causing this on my page. – JosephK Aug 01 '14 at 16:58
  • 4
    To @JosephK's point, this problem often arises from mis-use of Bootstrap's container, row, and column objects, which use padding and negative margins to offset each other perfectly, but ONLY WHEN USED properly in unison. Otherwise it breaks! In my experience, this is one of the most common causes of that white space to the right hand side. For a BRILLIANT, visual explanation of container, row, column for Bootstrap, including a discussion of this and other problems, read this (no I didn't write it): http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works – james Jun 14 '15 at 02:22
  • `overflow-x: hidden` is a very bad idea. After you zoom in, you will never be able to scroll. – John Strood Jan 07 '16 at 17:14
  • I accidentally found this question when trying to find answer on another - "What is the purpose of `body { width: 100%; }`. I would be very thankful if someone could explain it. – john c. j. Jan 23 '17 at 15:09
  • Rion, could you explain please, what is the possible purpose of `width: 100%` for body and html elements? Yes, I understand, that from practical point of view, `body { margin: 0; }` should be enough in most cases. I just want to understand more thoroughly. – john c. j. Jan 23 '17 at 18:23
  • he was right, we need to put these code on the very top of the css and make sure there's no overrided css after it. :D thanks that solved my problem as well... – gumuruh Mar 14 '17 at 11:47
  • After applying, scrolling on Safari iphone6s becomes laggy. On Chrome though works just fine. – Erik Rybalkin Nov 16 '18 at 10:06
  • This solved the issue of white space, but resulted in a different issue. I had a header menu on desktop that remained fixed on top as the user scrolled the page, with this, it didn't scroll any more. – JackDev Nov 15 '19 at 05:58
  • @Rion Williams. How to where body overflowed ? – abu abu Mar 20 '21 at 10:52
  • It isn't a solution, it just disables a scroll. – Valentin Yuryev Apr 03 '21 at 01:33
176

Debug your CSS for Ghost CSS Elements.

Use this bookmark to debug your CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Or add the CSS directly yourself:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

In my case a Facebook Like Button caused the problem.

ishanbakshi
  • 1,915
  • 3
  • 19
  • 37
optimiertes
  • 4,002
  • 1
  • 22
  • 15
65

After exploring some of the helpful strategies provided here, I found that I only needed to add iOS specific CSS (I put it at the bottom of my main css sheet.) Seems like hiding the overflow-x was the answer for me. I assume that stating the width at 100% helps in the event that my content goes wide. It should be noted that I was only having this issue in iOS. If it is also in Firefox, just the html and body block should probably be used as the @media is specifically targeting mobile devices.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

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

}

Please hip me if this seems incorrect to anyone :)

Jon Ryser
  • 761
  • 6
  • 4
35

This is a pretty old question, but I thought I'd add my 2 cents. I've tried the above solutions, including the ghost css, which I will definitely be saving for future use. But none of these worked in my situation. Here's how I fixed my issue. Hopefully this will help someone else.

Open inspector (or whatever your preference) and starting with the first div in body tag, add display: none; to just that element. If the scroll bar disappears, you know that element contains the element that's causing the issue. Then, remove the first css rule and go down one level into the containing element. Add the css to that div, and if the scroll bar goes away, you know that element is either causing, or containing the offending element. If adding the CSS does nothing, you know it was not that div that caused the issue, and either another div in the container is causing it, or the container itself is causing it.

This may be too time consuming for some. Lucky for me, my issue was in the header, but I can imagine this taking a bit of time if your issue was say, in the footer or something.

hyphen
  • 957
  • 1
  • 11
  • 31
  • This method helped me find the bug thanks – Bill Nov 21 '14 at 15:48
  • Yeah, or you can go down the dom hidding the highest level's divs one by one, then go inside them.. and so on – hatenine Sep 17 '15 at 12:13
  • This is really the only way to successfully fix the root problem when you have weird elements like ones with `height: 0` or `height: 1`. In my case, I found the cause was an errant 'invisible' class in Drupal 7 core: https://www.drupal.org/node/2664214 – geerlingguy Jun 20 '16 at 04:42
18

overflow-x: hidden; works perfect for me.

karthikr
  • 97,368
  • 26
  • 197
  • 188
Hom
  • 421
  • 1
  • 4
  • 7
7

The problem is in the file :

style.css - line 721

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

remove the lines :

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 

This basically gives a shadow gradient only to the footer. In Firefox, it is the first line that is causing the problem.

DMin
  • 10,049
  • 10
  • 45
  • 65
3

This question has been hanging around for a while, but none of the fixes I could find worked for me (having the same issue with ipad), but I managed my own solution which should work for most people I imagine.

Here's my code:

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

Enjoy!

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Michael
  • 807
  • 4
  • 14
  • 25
3

Apparently the (-o-min-device-pixel-ratio: 3/2) is causing problems. On my test site it was causing the right side to be cut off. I found a workaround on github that works for now. Using(-o-min-device-pixel-ratio: ~"3/2") seems to work fine.

j0k
  • 22,600
  • 28
  • 79
  • 90
Lu R.
  • 31
  • 1
3

I see the question has been answered to a general standard, but when I looked at your site I noticed there is still a horizontal scroll-bar. I also notice the reason for this: You have used the code:

.homepageconference .container {
padding-left: 12%;
}

which is being used alongside code stating that the element has a width of 100%, causing an element with a total width of 112% of screen size. To fix this, either remove the padding, replace the padding with a margin of 12% for the same effect, or change the width (or max-width) of the element to 88%. This occurs in main.css at line 343. Hope this helps!

3

I had the same issue, so tried a few things. One of which seemed to work for me - removing the width and adding a float to the body tag.

May not work for all instances, but in the scenario I recently had, hiding overflow on content elements was a no go...

luminancedesign
  • 362
  • 2
  • 5
3

I've also had the same issue ( Website body background rendering a right white margin in iPhone Safari ) and found that adding the background image to the <html> tag fixed the problem.

Before

body {background:url('images/back.jpg');}

After

html, body {background:url('images/back.jpg');}
Community
  • 1
  • 1
Xavi Esteve
  • 1,114
  • 2
  • 19
  • 35
2

I was experiencing the white line to the right on my iPad as well in horizontal position only. I was using a fixed-position div with a background set to 960px wide and z-index of -999. This particular div only shows up on an iPad due to a media query. Content was then placed into a 960px wide div wrapper. The answers provided on this page were not helping in my case. To fix the white stripe issue I changed the width of the content wrapper to 958px. Voilá. No more white right white stripe on the iPad in horizontal position.