Problem with css scale transform and filter blur

user_4110588 0
Viewed 1894

I have problem on Chrome browser while combining two properties: filter: blur(15px) and transform: scale3d(1.2,1.2,1).

I have two images, one over another. Image on higer layer is blurred, but it's edges got transparent when I applied that filter, so I added overflow:hidden to parent div, and scaled up image. I expected to see just opaque part of image.

It works as expected on Firefox and Opera, however on Chrome and MS Edge browsers not. How to fix this?

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>

css-filters css-transforms css html
1 Answers

Changing scale3d(1.2,1.2,1) to scale(1.2) helped me on Chrome 86.0.4240.198.

user_146480740
Related