Grid: Error when hovering over moved elements on mobile views

Community resources Bugs
1

What’s going on here with grid?

When I change the grid for mobile views and move elements to a different position than on desktop, those elements try to go back to their original position when hovering over them.

See https://omp-sandbox.webflow.io/profile, the four main columns in Overview. In tablet view the grid is changed to 2x2 and the error happens when hovering over the moved elements at the bottom.

I think this is a bug.

https://preview.webflow.com/preview/omp-sandbox?utm_source=omp-sandbox&preview=314d5e5a8fd596432610e8c2a1484a3b

2

Please take a look at this topic to see how you can possibly resolve your issue.

1 Like
3

Thanks a lot Jeff, that’s very helpful. @webdev

4

Tai’s solution from that post seems to work, but I also found out several things about the issue:

  • This happens with elements without hover state set.
  • The flickering happens even within desktop view only, by just moving the troubled element from one grid cell to another.
  • Temp solution: If I move the element outside of the grid first and then back into it, I can then move it within the grid without any issues, flickering is gone. (without applying Tai’s fix)

I cannot identify what caused the element to become troubling in the first place, though. It can be related to copying elements. But if I create an exact new element and add the same class, I can move this element within the grid without causing any issues. The problem only happens with a ‘tainted’ element, but by taking it out of the grid element and back again the issue is resolved.

I added a test example at the bottom of my page to play with.

2 Likes
5

Hi, @davidvm!

Thanks for posting about this issue. I’m so sorry for any frustration this might be causing.

There seems to be a lot happening here and I want to make sure I get it right.

Would you be able to use a tool like Cloud App to provide me with a short video about this issue?

Also, can you please take a screenshot of your Console and post it here as well? How to get console

When you send the video and console screenshot over I’ll dive and help track down what’s happening. And if it is a bug, I’ll pass it on to our engineers!

I’ll be looking forward to your response so I can help you solve this issue!

1 Like
6

Hi @rileyrichter, thank you,

I already explained the issue and found a solution, so it’s no longer a problem for me. It’s also the same issue explained on these other posts:

But I created a blank project so that you can see clearly what the issue is:

https://grid-bug.webflow.io/

Just hover over the red block.

https://preview.webflow.com/preview/grid-bug?utm_source=grid-bug&preview=6ea34a3c64c76bc1b31b033d4751b2e1

This happens when moving the block from one grid cell to another.

As you can see, there are no hover settings involved, and no grid layout change on mobile views.

You can even remove the block’s class and the issue will still happen.

There are no errors on console either.

Problem is resolved if you move the block out of the grid and then back in.

Only thing important is that I copied the offending element over from my original project, along with the grid element, but I then removed their classes and created new ones. I don’t know at this point how to recreate the issue from scratch.

Hope this helps.

Best,
David.

3 Likes
7

Thanks, @davidvm - this helps a lot!

Appreciate it! Thanks so much! :smiley:

2 Likes
8

Hey @rileyrichter, I’m having this glitch too:
https://preview.webflow.com/preview/joshua-collins-2020?utm_source=joshua-collins-2020&preview=d9daaa6488bbe9f6afee266cd8f1f4fa

Here is a video: Loom | Free Screen & Video Recording Software | Loom

thanks for your work!

UPDATE I was able to find a workaround fix by deleting the glitching grid element and then recreating it with the same classes I had created for it.

9

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