CSS grid adds glitch hover effect

[Svarte_Peter_J_Barte (Svarte Peter J Bartel)]

I have a lot of problem with the CSS grid in Webflow lately to the point I can´t use it.
Everytime a adjust any property on child elements in the grid on ipad or mobile, the position of the element moves to another place in the grid on the desktop breaking point.
Sometimes if I move an element to a different place in the grid, it will go back to the origin when hovered without me adding a hover state (see gif below).

[PeterDimitrov (Webflow Expert Partner)]

Hey @Svarte_Peter_J_Barte

Can you share your read-only link so I can take a look?

Piter

[Svarte_Peter_J_Barte (Svarte Peter J Bartel)]

Sorry, I had to delete and recreate it due to a deadline. I will send a link next time it happens!

The hover effect disappeared after I deleted the class and recreated it. But the problem with the children in the grid jumps to random placement when i changes anything on mobile breakingpoint is still present. I can’t share the link here, but i can PM you

Thanks Piter! <3

[dmaia (Daniel Castro Maia)]

I actually have the exact same bug. Happens on bigger CSS grids. Here’s the link.

EDIT: Also happens on the live site!

[itsaaronward (Aaron Ward)]

I’ve also been having this issue.

I’m just in the process of fixing it:

I believe it’s that on hover you’ve changed the layout of the grid/position the element is in.

I found that this is my issue and I can only think of fixing it by remaking the classes from scratch and layout.

Basically to summarize, on the tablet media query I moved a grid element to another grid space (row/column) by accident whilst on the hover style for a class and this messed everything up.

It sucks but I rebuilt my whole grid section. Luckily it looked even better the second time I styled it

[dram (Alex Dram)]

I had no idea one can even do that. Change element position on hover? Wow.

[Svarte_Peter_J_Barte (Svarte Peter J Bartel)]

Exactly this except I never enter the hover states at all. It happens anyway

[webdev (Jeff Selser)]

See if this is your issue and if the resolution here addresses your issue. I personally don’t have time to check it at the moment.

Grid layout is 'glitching' on hover on tablet and mobile

Hi there, I’ve used the ‘grid layout’ on the homepage on my new website and once you fold-down to tablet and mobile - when you ‘hover’ over content or try to tap on a button, the content starts ‘flickering’ and ‘glitching’. I’m not sure what is happening and what is causing this. Is there a way I can fix this? Here is the website: https://preview.webflow.com/preview/brandeddesigns?utm_source=brandeddesigns&preview=e63cb0faacf288488148386970ce0b98 Kind regards, Krystle Here is my site Read…

[glennyboy (Glenn)]

Same problem here and this appears to occur when you reposition a div on a grid. The moved grid item has a different hover position to the moved div which causes the flicker on hover. It’s very annoying.

[raist (Petr Šťastný)]

Same bug here (element is flickering on hover, but I never touched hover state of that element).

Solution:

• Select flickering element in grid.
• Change it’s state to Hover.
• Now try to set grid position of element again (just drag it to more/less columns).
• Change state back to normal.

[Jeandcc (Jean Costa)]

Same bug over here. Please fix this Webflow

[gaiapunk (Evan Schoepke)]

They know about it and are working on a fix, in the mean time sometimes removing the glitching element and then putting it back in fixes it, don’t know why…