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.
- On Desktop, select the
Content div element
- Go to the Style Panel, and select the “Hover” state
- Open the console (
Cmd + Option + J for mac chrome, or
Cmd + Shift + J for windows chrome)
- Paste the following code in the console:
and hit Enter.
Here is a gif of the above instructions:
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.