Future Fix Navigation menu is offset by 1 pixel vertically (site content visible in gap)

[ACL]

Hi,

The following was witnessed in Google Chrome 106.0.5249.103 (latest version) with PixelExit's style demo board and also my own site (XF and XenBase version both 2.2.9).

There is a 1px gap between the top of the viewport and top of the sticky navigation. Site content will poke through this as you scroll down the page. FlatAwesome+ is one of the styles affected:

Pixel Exit XenForo Styles Demo : Flat Awesome Plus

pixelexit.com

Example (with block-header and block-minorHeader visible in that 1px gap):

The following styles also exhibit the same behaviour as FlatAwesome+ according to the style demo board:

• Bolt V3
• Nova
• Omni
• Fusion Gamer
• Blackened Pro

With the staff bar present (although cannot verify this on demo style board), this changes to a 1px gap between primary and secondary navigation, and the hScroller left/right arrows and selected navigation item visibly appear 1px taller (but Chrome inspector says their heights are the same).

I do not remember noticing this with FA+ 2.2.6 with XF 2.2.6.

Just a teensy weensy, itsy bitsy quirk! ??

 

[Russ]

It might be related to this: https://xenforo.com/community/threads/navbar-graphic-glitches-with-safari-on-ios.209438/

I'll double check though, thank you.

 

[ACL]

Interesting.

For what it is worth, the screenshots are from Windows 10 at 125% scale. The XF default style doesn't have the 1px gap.

 

[Russ]

Does the bug only happen when you zoom in? XF style definitely does the same thing when zooming in.

Something like this in extra.less would probably correct it without causing any actual side effects:

div.p-navSticky {
    top: -0.5px;
}

I'll monitor that bug report to see what they say about it.