Odd layout behavior when applying hover state or interaction to totally different elements

Design help Animations & Interactions
1

Hey community!

I am getting some odd behavior from my published site that I haven’t been able to ID the problem on. Hoping someone here might have a solution :slight_smile:

When I publish my site (here is the staging link), the layout changes when I hover over an element with a hover state or interaction applied to it, even though the interactions or hover states are not affecting the layout of any of these oddly behaving elements. UPDATE: this seems to only be happening on Chrome.

Here is a quick screenshare describing my issue better (hopefully haha):

https://www.loom.com/share/f9ec988a63ef4643852ce4d0a53c8b6d

And last but not least, here is my share link. Thanks for any help or pointing me in the right direction!

Michael

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
3

Hey man @myonke

On page load I see some flickers too.

4

@myonke It looks like .hero-pen-container is 200px on load but then drops to 127 or so for some reason when the interaction occurs, trying putting a fixed width of 200px on it and see if that helps.

5

@myonke Just tested in Chrome inspector and am not seeing the issue anymore:

image
image522×652 68.6 KB

Edit: nice looking site btw too :slight_smile:

6

Um… there are no interactions on the page at all from what I can tell. Can you update read-only or your description?