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.
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?
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.
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.
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.
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:
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.
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!
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!