CODEWITHSUNDEEP
csssafaribackground
Peter Taylor
Peter Taylor

Reputation: 53

CSS : Background linear gradient shows up black in safari

I made a background: linear-gradient in my CSS, it renders well in :

But the grey color (or white or any other color by the way) renders black instead. I tried the "cross browser compatibility" advices here but still unsuccessful.

What can I do to make it work on mordern Safari (MacOS) ? So that the linear-gradient turns white or grey above my <img> ?

NOTE: Here is a demo of what I did

EDIT: QUESTION SOLVED, Look at the answer for more details!

Upvotes: 3

Views: 1755

Answers (1)

Peter Taylor
Peter Taylor

Reputation: 53

I finally managed my way out with a JS code to target Safari browsers and add an ID attribute named #safari when my gradient class is found:

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
  {
    jQuery(".container-grey-img-right, .container-grey-img-left, .container-white-img-right, .container-white-img-left").each(function ()
    {
      jQuery(this).attr('id','safari');
    });
  }

Then I add CSS code that only applies to #safari.container-white-img-left (for instance, I made one for every class I needed):

Original gradient look like :

background: -webkit-linear-gradient(left, rgba(0,0,0,0) 30%, rgb(255, 255, 255) 90%);

becomes (with safari) :

background: -webkit-linear-gradient(left, rgba(255,255,255,0) 30%, rgb(255, 255, 255) 90%);

Safari understands that it has to be a white transparent while Chrome and others understand these the opposite way.

NOTE: I also made it work into IE using the following JS : 

var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
  {
    jQuery(".container-grey-img-right, .container-grey-img-left, .container-white-img-right, .container-white-img-left").each(function ()
    {
      var $container = jQuery(this),
      imgUrl = $container.find("img").prop("src");
      $container.find("img").addClass("featured-image");

      if (imgUrl)
        $container.css("backgroundImage", 'url(' + imgUrl + ')').addClass("custom-object-fit");
    });
  }

and CSS :

    /* Because the gradient doesn't work the same under IE. There is another version specificaly for IE */
.custom-object-fit.container-white-img-left:after {
            content:'';
            position:absolute;
            left:30%; 
            top:0;
            width:70%; 
            height:100%;
            background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,0))); 
            /* W3C */
            background: -ms-linear-gradient(left, rgba(0,0,0,0) 30%, rgb(255, 255, 255) 90%); 
            /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); 
        /* IE6-9 */
        }

 .custom-object-fit {
            position: relative;
            background-size: cover;
            background-position: center center;
        }
        .custom-object-fit .featured-image {
            opacity: 0;
        }

Upvotes: 2

Related Questions