How to make a background color stretch to left and right of viewport in Safari Browsers

Question

I have a site at http://bit.ly/1gH5Nqw that has a white background behind a content block in the middle of the page. The white background stretches to the left and right margin of the viewport in all browsers except Safari. Does anyone know why or how to correct the issue?

Here's my CSS:

div#maincontentcontainer div#home-services-block,
div#maincontentcontainer div#inner-page-content {
    background-color: #fff; /* trying to get background to appear in Safari browser */
    margin-top: 60px;
    position: relative; /* to get the container to extend to the screen/viewport margins */
    }
    div#maincontentcontainer div#home-services-block:after,
    div#maincontentcontainer div#inner-page-content:after { /* to get the container to extend to the screen/viewport margins (http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen) */
        content: "";
        position: absolute;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff; /* changed `background:` to `background-color:` to see if white background would appear in Safari browser -- it did not */
        z-index: -1;
    }

Works in all modern browsers except Safari:

Does not work in Safari:

Could you post screenshots showing the difference between Safari and any other browser? — Hayden Schiff, Aug 17 '15 at 20:39
I am not sure how to test what it truly looks like on a Mac from my PC. There are some sites out there that replicate browsers and mobile devices for testing purposes but I cannot locate one that shows what a Mac Safari browser looks like. — H. Ferrence, Aug 17 '15 at 20:52
Safari 5...that's really old and I'm not sure it supports unprefixed `transform` — Paulie_D, Aug 17 '15 at 20:58
Ok, thanks @Paulie_D -- maybe it actually works in Safari on a Mac (which is what I am really targeting) — H. Ferrence, Aug 17 '15 at 20:59
vw is statedas unsupported in Safari until version 6 (see link) Since it is a full width you want, why not just set to 100%? http://stackoverflow.com/questions/24926145/why-font-sizing-vw-not-working-in-safari — Mousey, Aug 17 '15 at 21:10
I tried 100% @Mousey and that did not work in the Safari browser — H. Ferrence, Aug 17 '15 at 21:13

Rachel Gallen · Answer 1 · 2015-08-17T21:33:39.320

1

this is where the problem lies. the maincontentcontainer has a class called home background with the following attributes. the problem is the 100% auto i think. the class needs to be removed or the image needs to be changed. the image is a big blue one!

div#maincontentcontainer.home-background {
         background: url('/wp-content/themes/investorcom-2015/images/home-background.png') no-repeat center top;
         background-image: url(http://investor-com.com/wp-content/themes/investorcom-2015/images/home-background.png);
         background-size: 100% auto;
    }

edited Aug 17 '15 at 21:33

answered Aug 17 '15 at 21:24

Rachel Gallen

27,943
21
72
81

Ok, thank you @RachelGallen. I tried simply removing that image from the css but the white background still does not reach the viewport margins. – H. Ferrence Aug 18 '15 at 12:20

H. Ferrence · Accepted Answer · 2015-08-18T14:05:15.970

I solved it this way:

HTML/PHP markup modification in the <head> section:

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') == true && strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') == false) { ?><link href='/wp-content/themes/investorcom-2015/css/safari-styles.css?ver=1.0.0' media='all' rel='stylesheet' type='text/css' /><?php } ?>

CSS Styles:

div#maincontentcontainer div#home-services-block:after,
div#maincontentcontainer div#inner-page-content:after {
    margin-left: -100% !important;
    width: 200% !important;
}

Thanks to @RachelGallen for pointing me in the right direction.

How to make a background color stretch to left and right of viewport in Safari Browsers

2 Answers2