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