Wobble CSS ... Maybe someone has an idea

Hi

I am having some cards with an effect to move up and get a bigger shadow. As it can be seen in the video, the content of those components are wobbeling when hover over the card.

Anyone has an idea how to fix it? Besides removing the hover effect :smiley:

I think this is just a side effect of animating with Alpine/CSS maybe… does it do it in Chrome based browsers as well?

@bon would probably know more about all this :thinking:

Hi @dan,

oh well I develop against Chrome, since it has a market share of 67%. I realized that with Safari that wobbeling is not visible, so its only in Chrome.

Oh that is interesting, it’s usually Safari with the issues these days :rofl:

Hi @Beblebroks,

hard to tell exactly what’s going on from the video - if you could share the project with us I could take a look :slight_smile:

Hi @bon,

would like to. But most of the staff is based on a devpack and that I can not upload to the cloud. Its already pretty late in Indonesia, let me get a plain project together tomorrow that I can share. If I can not reproduce it, should I send the devpack? If you got a github account I can share it with you.

1 Like

Hi @bon,

I got it reproduced with standard components:

elementsapp://downloadDocument/Yykl5CnEll1A

In case you wont see it here a video.

  1. I created a global
  2. Added them and unlink them, had some modifications like tags, z-index.
  3. Wobbeling is in line 2, that grid is set up as 2 rows.
1 Like

Thanks for the project :slight_smile:

Unfortunately I’m struggling to reproduce/see the issue, would you be able to publish the page somewhere? That way I could test the exported code and see if I can identify the issue.

Hi @bon,

Please find the page below. The wobbeling is visible in my browser (Chrome).

P.S.: This is my first published page with elements :heart_eyes:

checked both project and chrome safari, do not see any wobble

In safari I also dont see it … only in Chrome. Which version are you using?

Version 134.0.6998.88

Version 134.0.6998.45 (Official Build) (arm64), its just updating when I checked version, try in a minute

Do you see the vertical shaking in the video?

Is this one on the page:

I figured out it depends on the browser size

Version 134.0.6998.89 (Official Build) (arm64) chrome

ah I see it with tags

how did you do the zoom? :astonished_face: Tried to figure that out with cleanshot for a while already

iam on my MacBook just used trackpad two fingers to zoom just pull finger apart

:rofl: … yeah that makes sense …

So here on different screensize it starts and stops.

I managed to re-create it here in Chrome after resizing the browser. @bon was taking a deeper dive into it this morning.

Not sure if this is just tailwind / alpine.js related.