Image moves on hover when changing filter in chrome Image moves on hover when changing filter in chrome google-chrome google-chrome

Image moves on hover when changing filter in chrome


This is a confirmed Chrome bug that popped up in a recent update, and should hopefully get resolved soon.

Here's a reduced test case: https://codepen.io/chasebank/pen/KZgYXK

Here's the Chromium issue marked for triage.

I think the best thing to do for now is nothing. Wait for a proper fix to be implemented. It's never a good idea to hack around an acknowledge browser bug.

We can take some comfort in the fact that the only other people seeing this are Chrome users who recently updated. My first try was asking a Slack channel full of skilled devs, and even they weren't seeing it.

$('#toggleBlur').click(function() {  $('#content').toggleClass('blur')})
body {  padding: 5%;}div {  filter: blur(0px);}.blur {  filter: blur(.1px)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="toggleBlur">Toggle blur</button><div id="content">  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eum nisi voluptate eaque! Sequi sit nemo iste. Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis, alias beatae accusamus labore.</p>  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate enim magnam nemo atque, ad placeat ab unde consequatur minima velit, ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem?</p>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti commodi cum sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam, cumque eaque omnis quae accusamus, repellat dolore modi!</p></div>