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

Community resources Bugs
1

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-Only: LINK
(how to share your site Read-Only link)

2

Hi Krystle, I’m one of the core engineers working on grid — thanks for reporting this issue, and thanks for providing the link and details of this bug!

I looked into it and found the problem — the Content div grid child element (with THE JUSTICE MOVEMENT heading) was also placed in the grid with the “hover” State turned on in Desktop.

The reason why this issue is occurring on tablet and below is due to the cascade: even though Content Div is placed in a different cell in the grid in tablet, the “hover” state from Desktop cascades down to the lower media queries, thereby overriding any placement you have set in the normal state at those device widths.

This is why the flickering is happening: on hover the placement changes, but because the placement changed, you’re no longer hovering so then it moves back, but then you’re back to hovering, and so it changes again… and so on.

The fix:

  1. On Desktop, select the Content div element
  2. Go to the Style Panel, and select the “Hover” state
  3. Open the console (Cmd + Option + J for mac chrome, or Cmd + Shift + J for windows chrome)
  4. Paste the following code in the console:
_webflow.dispatch({
  type: 'ABSTRACT_NODE_STYLE_DATA_CHANGED', 
  payload: {
    gridColumnStart: null, 
    gridColumnEnd: null, 
    gridRowStart: null, 
    gridRowEnd: null
}});

and hit Enter.

Here is a gif of the above instructions:

13%20AM
13%20AM1280×734 1.21 MB

I’ve created an issue for our team internally so that we can work on the actual fix, to make it clearer what the problem is, and to help avoid situations like this.

Thanks again!
Tai

5 Likes
3

THIS IS FANTASTIC! Thank you for helping me fix this issue! I’m glad we can help improve the grid layout together! : )

4

Hi @tai, I’m having this issue too and I found out several things:

  • 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 your fix above)

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:

David.

5

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