Streaming live at 10am (PST)

Gap between nav bar and dropdown - Android 8.0 Chrome


#1

Basically there is a very small transparent line in between my nav bar and its drop down. The only way I can produce the line is on my Nexus 5X 8.0 with Chrome. Also, on the same device, the bug does not appear on different browsers. I can not produce the bug on any of my other android devices (Which are below 8.0) nor does it appear on any IOS devices. Below is a link to a screen recording of the bug.

Thanks for any help!


Here is my live site: LINK
site Read-Only link
Youtube video of bug LINK


#2

Hi @Kameron2332

Thanks so much for posting this. This definitely sounds like odd behavior.

I wasn’t able to reproduce this issue with any other device/browser combination - as you mentioned.

Can you please try the following on the navmenu while on mobile portrait?

-Remove the negative top margin
-Set the absolute position to top
-Set top position on the navmenu to 60px

In theory this should resolve the issue. If this doesn’t resolve it, though, this may be a very rare, edge case where we do not have a solution.

Please let me know if this helps!


#3

Unfortunately, that didn’t work. The transparent gap still appears on my Nexus 5X. Do you guys have an Android 8.0 device to test with by going to the live site? My only assumption is that it has to do with Android 8.0 since that is the only distinction between all my other phones, but then again my Nexus 5X is my only 8.0 device.

This is the only thing stopping me from buying a paid plan since it is worrisome to think a phone update can wreck havoc; especially since I would be hosting myself.

My only workaround is to add a thick shadow to the nav bar so that the line is not as apparent when the background page is white.

UPDATE: this line appears on all nav bar dropdown menus. I even tried a variety of free templates that you guys provide and they all have the transparent line dividing the nav bar and the dropdown so this is not specific to my site. However, the line still only appears on my Nexus 5X 8.0


#4

Thanks for reporting those extra details @Kameron2332.

I have reported this issue to the team and we will look into it. Please note we may not have a solution soon as this is extremely edge case.

I will post back here when I have an update for you!

Thank you again for your help with this.


#6

Thanks for looking into it. On a side note, I made a new blank site, added a side bar, and only changed its color to grey (so the divide can be easily visible) and then went to Bestbuy and was able to get the line to appear on a variety of devices. Also, I can get the line to appear on IOS devices if I zoom in on the page the slightest amount, but once I zoom out, it disappears. So maybe the line is appearing on android because of a zoom issue? Excited to hear back!

Blank site link
http://cams-supercool-project.webflow.io

Edit Link
https://preview.webflow.com/preview/cams-supercool-project?preview=ba02ed8172a48b65506ef987e581a6d0


#7

Thanks for looking into this @Kameron2332!

I’ll share these findings with the team and be sure to post back with an update as soon as I get one.

I appreciate your help with this issue!


#11

Hi @Kameron2332

Thanks again for reporting this and for your patience.

Our team investigated this further and it looks like this is a browser rendering issue with Android/Chrome.

We were able to find a workaround that you can use to resolve this, though. You can add the following CSS snippet to the Head code field in your project settings.

<style>
.w-nav-overlay {
  /* Removes annoying gap between nav bar and menu on
   * Chrome for some Android devices:
   */
  transform: translate3d(0,0,0);
}
</style>


​Please let me know if this solves the problem. If not, I’m happy to help further :slight_smile:


#12

Thanks to your code, the line no longer appears on my phones, but the line still appears on my two tablets (Nexus 7 & Samsung galaxy tab 3).


#13

Thanks for letting me know that fixed it @Kameron2332! We may implement this workaround natively, but until then you can use this snippet anytime you run into the issue.

For those other devices, there’s not much else we can do here. As this is a browser rendering issue with Chrome/android devices we can only try to supplement with a workaround.


#16

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