Safari：混合混合模式的亮度无法正常工作

Question

我为自己的一张图片设置了mix-blend-mode，该图片在Firefox和chrome上完美运行，但在Safari上却无法正常运行。该叠加层位于我拥有的CSS滑块上，我发现transform弄乱了mix-blend-mode属性。如何避免转换干扰CSS样式。

我正在使用 Swiper Slider

下面，我放置了代码及其确切外观。最终结果应如下所示：

section {
  position: relative;
  will-change: opacity;
}

section::after {
  background-color: #3b5873;
  border: 33.325px solid #c4ae7e;
  content: '';
  display: block;
  height: calc(100% - 66.65px);
  position: absolute;
  top: 0;
  width: calc(100% - 66.65px);
}

.container {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  mix-blend-mode: luminosity;
  z-index: 9;
}

.image-bg {
  background-size: cover;
  padding-top: 59.08%;
}

<section>
  <div class="container">
    <div class="image-bg" style="background-image:url('http://dev-thepaxton.pantheonsite.io/wp-content/themes/paxton-theme/dist/images/home/gallery_0.jpg')"></div>
   </div>
</section>

Answer 1

很遗憾，Safari / WebKit SVG元素不支持mix-blend-mode：

https://caniuse.com/#feat=mdn-css_properties_mix-blend-mode_svg