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

Tags: html,css,safari,background-color

Problem :

I have a site at 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 ( */
        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: enter image description here

Does not work in Safari: enter image description here

Solution :

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.

    CSS Howto..

    How to set css style to button?

    How to make gradual colour change when hover with CSS?

    How can i repeat the image rollover and have multiple aligned underneath on my website?

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    How to target CSS class names that start with digit

    How to remove all css classes of all items of a
    with jQuery?

    How to download custom font for users who don't have it? [duplicate]

    In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

    How do I vertically and horizontally center all these elements?

    Primefaces: how to change the default icon on the button of the calendar field?

    How to Make CSS3 Columns Display Properly [closed]

    How to reset a css animation class using jquery?

    how to position an “Insert row” button in front of each horizontal row border of a table?

    How to align div in body to stay with specific height and width

    How can i Change the DOt in a JavaFx RadioButton?

    How do i place 4 headers from 1 div next to each other?

    How to get my “Register Now!” Link's to line up at the bottom using CSS

    how to center submenu under the parent `
  • `
  • CSS image rollover map and jQuery : how to use a second li list?

    How do i hide html until its processed with javascript?

    How can I move all my CSS box shadows back under div

    How to create a perfect 3 columns layout using CSS , with cross-browser support?

    How to create this image using CSS?

    How to set css to a specific selector using jQuery

    css - how to hide href link nested inside a div?

    How can I use CSS to select the “a” tag in the following layout?

    How do I make a div top to be the bottom of other div

    How to make list inside div expand after content in list

    How to create a curve tail for speech bubble with CSS?

    How to vertically align div containers with CSS?