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 design the data that you gathered from the table

    How to Stop Overriding of Bootstrap Css Styles

    How to output using digits only?

    How to change the display property in a css class using js when user clicks a button

    How to make “button-like appearance” with CSS

    How to achieve this complex layout with CSS?

    How to Make Text Hovering Area not a Full Line?

    How to include child div into parent div automatically?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How can I convert a SASS file to a CSS file in an ANT task?

    How do align texts in the child div

    How do I change the border lines COLOUR on the table view

    How to use CSS to create the left - right alignment so the left div does not push the right div

    How to make CSS flex properties compatible with older browsers?

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    How to make a div grow with its children when inline-blocks don't fit anymore

    How to make margin collapsing work with input type=button/submit?

    How to locate the element within CSS using javascript

    how to set equal font size in table cells for mobile device html pages

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to create a standing up 3D text effect with Css3 transforms

    how to make smooth css transition

    How can I center div in div in IE7

    How to make my asp chart scrollable in the x direction

    How can i display all buttons to right in bootstrap panel heading?

    How should a graphic designer learn web design? [closed]

    How to access element inside div in jquery and make exanding div transparent

    how to create a half bordered circle(only css, not js or even svg)?

    Bootstrap 3 - How to maximize input width inside navbar

    How to set margin for elements in my case