CSS Grid / hover interactions borked in Chrome, mangled in Firefox, and perfect in Edge (links & screen recordings inside)

Community resources Bugs
1

My CSS grid / hover interactions on are wildly broken in Chrome & Firefox (Firefox having far more severe issues). Edge, however, is pixel-perfect with every interaction as expected.

Here is my site Read-Only: LINK
Here is my Live Preview: LINK

It’s a few nested divs that reveal three CSS grids via hover interactions. See bottom of post for environment details.

(1) Chrome’s bugs and Steps to Reproduce (video here: https://streamable.com/o1cdi)

  1. Open Chrome 72 64-bit and click here: https://salams-first-project-e25a-26497edf79d4e.webflow.io/
  2. Hover over "About" or "Actions" at the top nav bar.
  3. A CSS Grid appears.
  4. The first row loads immediately, but the second, third, fourth, etc. rows either never appear until you hover over them or take ~400ms longer to appear. The 2nd - 4th rows all pop-in simultaneously.

Expected result: all CSS grid rows load simultaneously in Chrome.

(2) Firefox’s bugs and Steps to Reproduce (video here: https://streamable.com/tiio7)

  1. Open Firefox 65.0.1 64-bit and click here: https://salams-first-project-e25a-26497edf79d4e.webflow.io/
  2. Hover over "About" or "Actions" at the top nav bar.
  3. A broken CSS grid appears: columns are erroneously combined, text is missing, z-index on nav_menu is not respected (it’s either hidden or text is missing), and only the first “cell” loads

Expected result: a properly delineated CSS grid appears, all z-indexes are respected, all cells load, and all text is visible (according to the z-index & hover interactions).

(3) Edge’s Perfection

Edge (thank you, EdgeHTML?) works exactly as expected and follows all patterns properly. Video here: https://streamable.com/4mdco

—
—

What I’ve already tried:

  1. Removing the grid and using simple div blocks with text (exact same problem occurs).
  2. Checking another grid block (occurs on both "About" and "Actions")
  3. Adding more grid rows (the browser always halts rendering for ~400ms after the first CSS row on Chrome; did not have the heart to even try this in Firefox…)
  4. Trying another browser (Firefox had 3x more problems…)
  5. Duplicating the page (exact same problem occurs).
  6. Private browsing (exact same problem occurs). Videos here:

Chrome private browsing (exact same bugs as normal Chrome): https://streamable.com/tf45v
Firefox private browsing (exact same bugs as normal Firefox): https://streamable.com/zs994
Edge private browsing (as perfect as normal Edge): https://streamable.com/6r0n0

I’m new to Webflow, but this kind of cross-browser variance is rupturing my fragile trust. :frowning: My next steps:

  1. Hearing back from Webflow on my official bug report
  2. Pruning and re-doing most, if not all, interactions
  3. Giving up slowly as a painful early foray into web development

Environment details

– Intel i5-8600K / 16GB DDR4-3000 / Samsung 960 EVO 250GB / connected via 5GHz WiFi to 100Mbps/10Mbps cable line
– Windows 10 Pro 64-bit 1803 (Build 17134.590)
– Chrome Version 72.0.3626.109 (Official Build) (64-bit)
– Firefox 65.0.1 (64-bit)
– Edge 42.17134.1.0 / EdgeHTML 17.17134

2

Hi, @Salam_Sejahtera! Thanks so much for reaching out about this and for the detailed report. This helps us so much. I’m digging in and investigating now and I’ll get back to you soon!

2 Likes
3

Hi, @Salam_Sejahtera!

I did some more investigating and you may have found a bug! I’ve notified the team and they’re currently looking into the issue. I made a video to explain what I saw and to provide you a workaround so you can keep moving forward on your project.

CloudApp

As soon as our team knows more on this we’ll reach back out and update you!

1 Like
4

Riley, thank you very much for taking a look at this bug. I also sincerely appreciate the detailed walk through on the alternative method. I used the somewhat convoluted nested divs for a special swiping effect, but let me see if I can make it with the normal navbar. That would save a lot of time!

//

About the bug: I apologize for the delay; your inability to reproduce the first bug was a tad surprising, as I’d already tested two systems and it reproduced perfectly. Today, I reinstalled Chrome twice, tried the portable version, tried a different Windows user account, ran in Safe Mode, etc. and still: I got the bug every time.

Turns out this bug only exists on Chrome installed on Windows! Luckily, I got access to three fresh systems:

https://streamable.com/27yj9 : no grid bug on Chrome 72 / Mac OS (replicating your test)
https://streamable.com/180ho : no grid bug on Chrome 72 / Chromium OS
https://streamable.com/zpzpy: grid bug exists on Chrome 72 / Windows 10 (replicating my test)

I thought it might be a performance bug, but that Chromium system is quite underpowered (as the video might show).

//

Next steps:

  1. Might you be able to test Chrome on Windows 10 machine?
  2. I’ll attempt the built-in navbar and see if I can re-create the swiping interaction!
  3. Hopefully, the bugs can get squashed so at least the appearance/behavior is same across major browsers.
5

@rileyrichter Any luck?.. Seems like nothing has been updated here.

6

Hi @Salam_Sejahtera

Thanks again for reaching out here. I wanted to let you know that our team is still investigating this. I don’t have a solid time frame of when we’ll have a fix live, but we’ll be sure to update this thread when we do.

8

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