Image moves on hover when changing filter in chrome

Question

I have an image, when i blur it on hover, it slightly moves, it\'s like the image shakes in its position, problem only occurs in chrome ( tested with: chromium 63 linux-x86_

Answer 1

The only way i found to make this work properly is using a svg filter and animate the filter blur with GSAP.

https://jsfiddle.net/eg5yhu26/4/

var timeline = TweenMax.to("#hue1feGaussianBlur", 5, {
  paused: true,
  attr: {
    "stdDeviation": 5
  },
  onUpdateParams: ["{self}"]
});

$(document).on("mouseenter", ".c-grid__item a", function() {
  timeline.play();
});
$(document).on("mouseleave", ".c-grid__item a", function() {
  timeline.reverse();
});