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

Community resources Bugs
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