CSS transition effect makes image blurry moves image 1px in Chrome

Question

I have some CSS that on hover  a CSS transition effect will moves a div   The problem  as you can see in the example  is that the translate transition has the horrible side effect of making the image in the div move by 1px down right  and possibly resize ever so slightly   so that it appears out of place and out of focus     The glitch seems to apply the whole time the hover effect is applied  and from a process of trial and error I can safely say only seems to occur when the translate transition moves the div  box shadow and opacity are also applied but make no difference to the error when removed    The problem only seems to happen when the page has scrollbars  So the example with just one instance of the div is fine  but once more identical divs are added and the page therefore requires a scrollbar the problem strikes again

User · Answer

You need to apply 3d transform to the element, so it will get its own composite layer. For instance:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

or

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

More about layer creation criteria you can read right here: Accelerated Rendering in Chrome

An explanation:

Examples (hover green box):

When you use any transition on your element it cause browser to recalculate styles, then re-layout your content even if transition property is visual (in my examples it is an opacity) and finaly paint an element:

screenshot

The issue here is re-layout of the content that can make an effect of "dancing" or "blinking" elements on the page while transition happens. If you will go to settings, check "Show composite layers" checkbox and then apply 3d transform to an element, you will see that it gets it's own layer which outlined with orange border.

screenshot

After element gets its own layer, browser just needs to composite layers on transition without re-layout or even paint operations so problem have to be solved:

screenshot

User · Answer

Try filter  blur 0     It worked for me

User · Answer

Had the same problem with embeded youtube iframe  Translations were used for centering iframe element   None of the solutions above worked until tried reset css filters and magic happened   Structure    lt div class  translate  gt        lt iframe  gt   lt  div gt    Style  before    translate     transform  translateX -50      -webkit-transform  translateX -50        Style  after    translate     transform  translateX -50      -webkit-transform  translateX -50      filter  blur 0     -webkit-filter  blur 0

User · Answer

I had a similar problem with blurry text but only the succeeding div was affected  For some reason the next div after the one that I was doing the transform in was blurry  I tried everything that is recommended in this thread but nothing worked  For me rearranging my divs worked  I moved the div that blurres the following div to the end of parents div  If someone know why just let me know   before  lt header class  quot container quot  gt         lt div class  quot transformed div quot  gt             lt span class  quot transform wrapper quot  gt               lt span class  quot transformed quot  gt  lt  span gt               lt span class  quot transformed quot  gt  lt  span gt             lt  span gt          lt  div gt          lt div class  quot affected div quot  gt          lt  div gt        lt  header gt    after  lt header class  quot container quot  gt      lt div class  quot affected div quot  gt      lt  div gt     lt div class  quot transformed div quot  gt         lt span class  quot transform wrapper quot  gt           lt span class  quot transformed quot  gt  lt  span gt           lt span class  quot transformed quot  gt  lt  span gt         lt  span gt      lt  div gt     lt  header gt

User · Answer

Just found another reason why an element goes blurry when being transformed  I was using transform  translate3d -5 5px  -18px  0   to re-position an element once it had been loaded in  however that element became blurry   I tried all the suggestions above but it turned out that it was due to me using a decimal value for one of the translate values  Whole numbers don t cause the blur  and the further away I went from the whole number the worse the blur became   i e  5 5px blurs the element the most  5 1px the least    Just thought I d chuck this here in case it helps anybody

User · Answer

I cheated problem using transition by steps  not smoothly  transition-timing-function  steps 10  end     It is not a solving  it is a cheating and can not be applied everywhere   I can t explain it  but it works for me  None of another answers helps me  OSX  Chrome 63  Non-Retina display    https   jsfiddle net tuzae6a9 6

User · Answer

None of this worked  what worked for me is scaling image down  So depending on what size you want the image or what resoultion your image is  you can do something like this   x000D   x000D   ok         transform  perspective 100px  rotateY 0deg  scale 0 5         transition  transform 1s        object-fit contain     ok hover        transform  perspective 100px  rotateY -10deg  scale 0 5         Demo Preview Stuff     bad      max-width  320px     object-fit contain     transform  perspective 100px  rotateY 0deg      transition  transform 1s     bad hover        transform  perspective 100px  rotateY -10deg      div        text-align  center       position  relative       display  flex    h3      position  absolute      bottom  30px      left  0      right  0           b       display  flex    x000D   lt center gt   lt h2 gt Hover on images lt  h2 gt   lt div class  b  gt   lt div gt     lt img class  ok  src  https   www howtogeek com wp-content uploads 2018 10 preview-11 png  gt     lt h3 gt Sharp lt  h3 gt   lt  div gt    lt div gt     lt img class  bad  src  https   www howtogeek com wp-content uploads 2018 10 preview-11 png  gt     lt h3 gt Blurry lt  h3 gt   lt  div gt    lt  div gt    lt  center gt  x000D   x000D   x000D   The image should be scaled down  make sure you have a big image resoultion

User · Answer

I ve tried around 10 possibly solutions  Mixed them up and they still didn t work correctly  There was always 1px shake at the end   I find solution by reducing transition time on filter   This didn t work    elem     filter  blur 0     transition  filter 1 2s ease     elem hover     filter  blur 7px       Solution    elem     filter  blur 0     transition  filter  7s ease     elem hover     filter  blur 7px       Try this in fiddle    x000D   x000D   blur   x000D    border  none  x000D    outline  none  x000D    width  100px  height  100px  x000D    background   f0f  x000D    margin  30px  x000D    -webkit-filter  blur 10px   x000D    transition  all  7s ease-out  x000D       transition  all  2s ease-out     x000D    x000D   blur hover   x000D    -webkit-filter  blur 0   x000D    x000D   x000D   blur2   x000D    border  none  x000D    outline  none  x000D    width  100px  height  100px  x000D    background  tomato  x000D    margin  30px  x000D    -webkit-filter  blur 10px   x000D    transition  all  2s ease-out  x000D    x000D   blur2 hover   x000D    -webkit-filter  blur 0   x000D    x000D   lt div class  blur  gt  lt  div gt  x000D   x000D   lt div class  blur2  gt  lt  div gt  x000D   x000D   x000D    I hope this helps someone

User · Answer

filter  blur 0  transition  filter  3s ease-out transition-timing-function  steps 3  end     add this string with steps equal duration   I was helped by setting the value of transition duration  3s equal transition timing steps  3s

User · Answer

I recommended an experimental new attribute CSS I tested on latest browser and it s good   image-rendering  optimizeSpeed                                        image-rendering  -moz-crisp-edges              Firefox                image-rendering  -o-crisp-edges                Opera                  image-rendering  -webkit-optimize-contrast     Chrome  and Safari     image-rendering  optimize-contrast             CSS3 Proposed          -ms-interpolation-mode  nearest-neighbor       IE8                      With this the browser will know the algorithm for rendering

User · Answer

Scaling to double and bringing down to half with zoom worked for me   transform  scale 2   zoom  0 5

User · Answer

2020 update  If you have issues with blurry images  be sure to check answers from below as well  especially the image-rendering CSS property  For best practice accessibility and SEO wise you could replace the background image with an  lt img gt  tag using object-fit CSS property    Original answer Try this in your CSS   your-class-name                     -webkit-backface-visibility  hidden      -webkit-transform  translateZ 0  scale 1  1      What this does is it makes the division to behave  quot more 2D quot    Backface is drawn as a default to allow flipping things with rotate and such  There s no need to that if you only move left  right  up  down  scale or rotate  counter- clockwise  Translate Z-axis to always have a zero value  Chrome now handles backface-visibility and transform without the -webkit- prefix  I currently don t know how this affects other browsers rendering  FF  IE   so use the non-prefixed versions with caution

User · Answer

For me  now in 2018  The only thing that fixed my problem  a white glitchy-flicker line running through an image on hover  was applying this to my link element holding the image element that has transform  scale 1 05   a      -webkit-backface-visibility  hidden     backface-visibility  hidden     -webkit-transform  translateZ 0  scale 1 0  1 0      transform  translateZ 0  scale 1 0  1 0      -webkit-filter  blur 0      filter  blur 0     a  gt   imageElement      transition  transform 3s ease-in-out

[css] CSS transition effect makes image blurry / moves image 1px, in Chrome?

Examples related to css

Examples related to image

Examples related to hover

Examples related to positioning

Examples related to translate-animation