CSS grid adds glitch hover effect

Community resources Bugs
1

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).

Untitled

1 Like
2

Hey @Svarte_Peter_J_Barte

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

Piter :webflow_heart:

3

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 :slight_smile:

Thanks Piter! <3

1 Like
4

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

com-crop-2

EDIT: Also happens on the live site!

5

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 :wink:

6

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

7

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

1 Like
8

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: Error when hovering over moved elements on mobile views
9

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.

10

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.
11

Same bug over here. Please fix this Webflow :webflow_heart:

1 Like
12

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…

13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.