White space showing up on right side of page when background image should extend full length of page [closed]

Question

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.

Turnout

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.). – Annates

have u solved it out @Dave? – Thiosinamine

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://mcmap.net/q/168061/-css-background-stretches-to-fill-screen-on-safari-but-not-on-ios – Joyous

Answer 1

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

Manus

awesome, that just fixed a bug for me that's been bothering me for a while! – Undirected

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. – Roulers

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. – Inexhaustible

Worked perfectly on my project that utilizes a lot of background-color properties. – Droit

I found that bootstrap's 'row' class was giving a {margin-right:-15px} which was causing this on my page. – Crean

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): helloerik.com/… – Oubliette

overflow-x: hidden is a very bad idea. After you zoom in, you will never be able to scroll. – Themselves

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. – Cam

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. – Cam

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... – Thiosinamine

After applying, scrolling on Safari iphone6s becomes laggy. On Chrome though works just fine. – Practical

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. – Baucis

@Rion Williams. How to where body overflowed ? – Legato

It isn't a solution, it just disables a scroll. – Tm

Answer 2

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.

Naylor

this really came in handy – Roderick

Brilliant solution! This will help you find the root of the issue and fix it correctly, and all it requires is a few lines of css. – Rossi

This should be the accepted answer IMO. My bet is that most people used 100vw as the width of something and got this bug as a result. Simply hiding the overflow is a sub optimal solution. – Goldarned

This is impressive, spent 2 hours on that goddamit white space, this solved it. – Sacculate

We can use this also for *::before and *::after. -- In my case, PNG shadows in pseudo-elements portruded out of borders. – Basilio

Adding outlines to all elements really is the best solution to debug the problem. just hiding overflow is a bad hack/workaround that leaves bugs in your styling and may cause further problems later. – Fillbert

New addition to every CSS project I'm involved with. Brilliant. – Livre

Best solution for layout debugging... – Clougher

The best answer, the overflow seems to change a bit the padding, and positions. I need to save this :D – Tattletale

Answer 3

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 :)

Armandinaarmando

This was the only thing that solved my problem – Duran

Thanks - best fix for me. Fairly unobstrusive too – Merocrine

This solves the issue and makes sense for mobile white space – Desrochers

After applying, scrolling on Safari iphone6s becomes laggy. Am I missing an additional property for mobile Safari to make it work smooth? – Practical

best answer for me !! – Langston

@Duran I had been searching for a different solution, but seems like this is the only solution currently. Working on Angular 9. – Summons

Why does this work? – Accountancy

@JonRyser ^ thoughts? – Accountancy

Answer 4

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.

Rosio

Yeah, or you can go down the dom hidding the highest level's divs one by one, then go inside them.. and so on – Timeconsuming

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: drupal.org/node/2664214 – Rosser

Answer 5

overflow-x: hidden; works perfect for me.

Ciapas

Answer 6

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.

Lauer

Answer 7

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');}

Wauters

Answer 8

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!

Rawdon

Answer 9

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.

Gesticulation

Answer 10

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!

Chintz

Or, set the box-sizing property to border-box. – Acclamation

Answer 11

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...

Isomorph

I had to set html, body to width: 0 to get rid of ghost element on the top on Firefox. – Waistband

Answer 12

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.

Macrophysics