在 chrome 中缩放和模糊图像时出现奇怪的故障

Question

I'm experimenting a "zoom and blur" css effect. So when I hover over an image, it's supposed to blur out and scale a bit, while contained in a div with overflow:hidden .

However, when running in Chrome, there's always a weird glitch. A blurry white border shows up around the container while the transition is going.

I'm wondering if there's a better way of doing it? Or a method of circumventing it? Thanks a lot!

You can see a gif demonstrating the problem: http://imgur.com/SrK5rXq

And the same code running in firefox as a comparison: http://imgur.com/942LBKV

Note the borders within the image.

And below is my code:

<style>
#img0{
    width:500px;
    height:auto;
}
.hoverBlur{
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    transform:scale(1.1);

    -webkit-filter:blur(15px);
    -moz-filter:blur(15px);
    filter:blur(15px);

}
.container{
    margin:200px;
    width:500px;
    height:333px;
    border:1px solid #ccc;
    overflow:hidden;
}
</style>
<div class="container">
    <img id="img0" src="test.jpg" class="hoverBlur"/>
</div>

Answer 1

This is a REALLY old thread but I ran into this issue and couldn't find the solution published anywhere else so I'm posting it here:

You can fix this by adding a margin to the image that is the same size as the blur size (in this case 15px) then transform: translating the image back into place.

https://jsfiddle.net/zeojxtvb/

So in our example, a blur(15px) is applied to the image. So also apply the following to the image:

img {
    ...
    margin: 15px;
    transform: translate(-15px, -15px);
}