CSS：背景线性渐变在safari中显示为黑色

我在CSS中制作了一个

背景：线性渐变

，它在：

• Chrome（PC+Mac）
• Mozilla（PC+Mac）
• Opera（PC+Mac）
• Internet Explorer

但是灰色（或者白色或者其他任何颜色）会呈现黑色。我尝试了“跨浏览器兼容性”的建议，但仍然没有成功

我该怎么做才能让它在现代Safari（MacOS）上运行？使

线性渐变

在我的

上方变成白色或灰色

注:

---

编辑：问题已解决，请查看答案了解更多详细信息

我最终通过一个JS代码来对付Safari浏览器，并在找到我的渐变类时添加一个名为

#Safari

的ID属性：

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

然后我添加了只适用于

#safari.container white img left

的CSS代码（例如，我为我需要的每个类制作了一个）：

原始渐变看起来像：

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

成为（使用safari）：

Safari知道它必须是白色透明的，而Chrome和其他人则相反

注意：我还使用以下JS将其应用到IE中：

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

---

请提供一份报告。请看codepen的指南链接，必须有足够的代码来复制问题本身中的问题

    /* 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;
        }