mapbox / mapbox/mapbox-gl-js

White gap for tiles on Windows Chrome if have a Navbar

Open
#13,141 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

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://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/).

[https://github.com/ssp6/mapbox-gl-bug-recreation](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

image

### Actual Behavior

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

image
image

### 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked minimal React reproduction with `npm i && npm start` on the specified Windows Chrome and Edge versions, then inspect the map and navbar layout behavior. Done means the map fills the expected viewport without the opposite-side white gap when the fixed or absolute element touches the screen edge.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.