Safari: светимость в смешанном режиме работает неправильно - PullRequest
Новая
       51

Safari: светимость в смешанном режиме работает неправильно

0 голосов
/ 19 июня 2019

У меня есть mix-blend-mode для одного из моих изображений, который отлично работает на Firefox и Chrome, но не на Safari.Оверлей наложен на слайдер CSS, который у меня есть, и я обнаружил, что transform портит свойство mix-blend-mode.Как избежать того, чтобы преобразование мешало стилю CSS?

Я использую Swiper Slider

Ниже я разместил свой код и точнокак это должно выглядеть.Окончательный результат должен выглядеть следующим образом:

enter image description here

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>
...