White gap for tiles on Windows Chrome if have a Navbar

[ssp6]

Bit of an odd issue, can't seem to see it mentioned elsewhere. On Windows Chromium browsers (tested and fine on mac) if there is an element that is fixed/absolute and touches the top/bottom of the screen then there is a white space at the opposite side the exact same size as the element.

This was found in a project because we have a nav bar that renders over the top of the map. We do some animation stuff so initially presumed it was that but even stopping back to basics occurs.

Have a look at what we've tried to hack around this, open to other suggestions. But the canvas fills the desired space so I can only presume this is internal to the drawing on the canvas.

mapbox-gl-js version: 3.2.0, 3.1.0, 2.15.0

browser: Windows computer Chrome and Edge (Tested on 123, 122, 121, and 120)

Steps to Trigger Behavior

Here is a minimal react project with steps taken exactly from docs.

https://github.com/ssp6/mapbox-gl-bug-recreation

npm i && npm start the project in one of the problem browsers on Windows and you will see the issue.

Link to Demonstration

Unsure if/how to get this into jsbin

Expected Behavior

Expect the map to fill the full height of the screen

Actual Behavior

There is a white space that is the exact same size as the element.

What we've tried to fix / hack around

• Moving the fixed element away from the edge (top: 1px) — This removes the blank space! But there's a gap
• Adding a border around some components to remove "gap" — Blank space came back
• Moving the fixed element up so that some of it comes off the screen — Blank space gets smaller by exactly how much the element was moved
• Making the map not fill the screen — no impact