CSS: Фоновый линейный градиент отображается в сафари черным

Question

Я сделал background: linear-gradient в моем CSS, он хорошо рендерит в:

• Chrome (ПК + Mac)
• Mozilla (ПК + Mac)
• Opera (ПК + Mac)
• Internet Explorer

Но серый цвет (или, кстати, белый или любой другой цвет) вместо этого делает черный цвет. Я попробовал советы по "кросс-браузерной совместимости" здесь , но все еще безуспешно.

Что я могу сделать, чтобы он работал на современном Safari (MacOS)? Так что linear-gradient становится белым или серым над моим <img>?

ПРИМЕЧАНИЕ: Вот демонстрация того, что я сделал

РЕДАКТИРОВАТЬ: ВОПРОС РЕШЕН, посмотрите на ответ для более подробной информации!

Answer 1

Я наконец справился с JS-кодом для целевых браузеров Safari и добавил атрибут ID с именем #safari, когда мой класс градиента найден:

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

Затем я добавляю код CSS, который применяется только к #safari.container-white-img-left (например, я создал один код для каждого нужного мне класса):

Оригинальный градиент выглядит как:

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

становится (с сафари):

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

Safari понимает, что он должен быть белым прозрачным, в то время как Chrome и другие понимают это наоборот.

ПРИМЕЧАНИЕ. Я также включил его в IE, используя следующий 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");
    });
  }

и 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;
        }