Description

Given a minimal document, e.g., a div container that contains two elements:

1. A div with position sticky, top 0, and some height value
2. The Map component

When scrolling, as the sticky header sits on top of the map container, the map seems to scroll itself within the container, for the height of the sticky div. When the sticky div has been scrolled more than its height down the map container, the map canvas resets to the correct position. The issue only seems to happen on Chrome.

Expected Behavior

I would expect it to not scroll/visually distort on Chrome.

Steps to Reproduce

https://codesandbox.io/p/sandbox/sleepy-chaum-3xvglx?file=%2Fsrc%2Findex.js

Example here. Simply need a container, a sticky element with some height >0.

I have verified that the issue does not occur when creating a map using the Mapbox instructions here:
https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/ in place of the Map component in the above example.

Environment

• Framework version: React@18.2.0
• Map library: react-map-gl@7.1.7, mapbox-gl@3.0.0
• Browser: Google Chrome Version 126.0.6478.127 (Official Build) (x86_64)
• OS: macOS Sonoma 14.4.1

Logs

No response