Проблема с преобразованием масштаба CSS и размытостью фильтра - PullRequest
Новая
       38

Проблема с преобразованием масштаба CSS и размытостью фильтра

1 голос
/ 20 июня 2019

У меня проблема в браузере Chrome при объединении двух свойств: filter: blur(15px) и transform: scale3d(1.2,1.2,1).

У меня есть два изображения, одно поверх другого. Изображение на верхнем слое размыто, но его края стали прозрачными, когда я применил этот фильтр, поэтому я добавил overflow:hidden к родительскому div и увеличил изображение. Я ожидал увидеть только непрозрачную часть изображения.

Работает, как и ожидалось, в Firefox и Opera, однако в браузерах Chrome и MS Edge - нет. Как это исправить?

preview of the result

#images-box{
  position: relative;
  width: 500px;
  height: 280px;
  overflow:hidden;
}

.image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
  background-size: cover;
  background-position: 50% 50%;
}
.image.blured{
  -webkit-filter: blur(14px);
  filter: blur(14px);
  z-index: 2;
  -webkit-transform: scale3d(1.2,1.2,1);
  transform: scale3d(1.2,1.2,1);
}
<div id="images-box">
  <div class="image"></div>
  <div class="image blured"></div>
</div>
...