Streaming live at 10am (PST)

Image link hover - images shifting weirdly


#1

HI again!

I've just made some hover transitions for image links, whereon rollover the image shifts up 20px or so, however I've noticed that all of the other images in the container move slightly side to side as the transition happens.

here is the site:
https://webflow.com/design/pets-domain?preview=6fe3f4003a1fe24ff599322e11c801db

I haven't started with the tablet/phone sizes yet, so it only appears to happen at default desktop size. Can anyone give me a clue as to why this would be happening?

cheers,
Karl


#2

Thanks for adding the Public Link! It looks really good and smooth on my end. Maybe your browser is zoomed in or out? Press CMD+0 or CTRL+0 to reset it and see if that fixes it.


#3

mmm interestingly I accidentally deleted the transition, re-applied it, now it's working fine! weird

edit nope doing it again...


#4

We turn off transitions on selected items. So when you hover over a non-selected item it will transition normally, but when you try to hover over the element you have selected, the transition will be disabled temporary.

Maybe that's what you're running into?


#5

That's something that happens on Chrome sometimes. I have it too on my website :: http://bartekkustra.eu. If you hover over Skype icon the rest moves slightly etc.


#6

Oh @Plaedien and @bartekkustra that's what you guys are talking about. It's a Chrome rendering issue resulting in jitters on transitions. Add this to your custom code:

<style type="text/css">
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;   
</style>

#7

To slightly expand on what @thesergie suggested, I would recommend creating a global class and inserting it into your custom <head> code.

Since we're trying to create smoother animation, we can also promote the div to a GPU layer (in addition to the backface-hidden trick). For example:

<style type="text/css">
  .layer {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
</style>

Once inserted into your <head> code, you could then add the class to any element in Webflow:

Note: Be sure to use this trick sparingly, especially when targeting mobile devices. If we offload too many layers to the GPU, it might cause performance problems on devices with less VRAM. More technical details can be found here.


#8

Just when I thought Chrome was perfect!

Thank you for the replies, that helps immensely. I had no idea you could offload specific layers to the GPU through web coding. That's one of the things I love about web design - you learn something new every day!


#9

Thanks for the help guys, unfortunately it still appears to be happening, with both of those solutions.
Interestingly, it works fine on Chrome Canary. I suppose it might be something I have to live with for the time being!


#10

#11