[Bug] Map not rendered in Safari with web inspector tools open

[yonitou]

Description

On Safari, maps from Mapbox have a lot of issues that make this package unusable :

• The layers don't appear
• The styles are not loading properly

Here is a very minimal MRE using Safari 18.3.1

const App = (): JSX.Element => {
  return	( 
    <Map
	mapboxAccessToken={TOKEN}
	mapStyle="mapbox://styles/mapbox/dark-v9">
    </Map>
  );
}

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
	<StrictMode>
		<App />
	</StrictMode>

Results with some different styles :

With mapStyle="mapbox://styles/mapbox/dark-v9"

With mapStyle="mapbox://styles/mapbox/standard" :

With mapStyle="mapbox://styles/mapbox/streets-v12"

Expected Behavior

The map should work normally on Safari

Steps to Reproduce

1. Copy paste the code above
2. Launch Safari and try it

Environment

• Framework version: [email protected]
• Map library: [email protected]
• Browser: Safari 18.3.1
• OS: MacOS 15.3.2

Logs

No response

[Pessimistress]

You are not specifying any props to set the map center. What do you expect to see?

Normally, a bug report like this is not actionable unless you also check:

• does your app work in other browsers?
• does your browser render examples on https://visgl.github.io/react-map-gl/examples ?
• if the answers to the previous one is "no", does your browser render the examples on Mapbox GL JS official documentation site?

[yonitou]

Hi @Pessimistress,

I expect to see neither a black screen or a white earth. This is a layout issue and I just found the root cause :

• I tried to display the examples on react map gl website and it worked
• I copy pasted it the code of a random example (the clusters one : https://github.com/visgl/react-map-gl/blob/7.0-release/examples/clusters/src/app.tsx) on a fresh new repo and it didn't work (eg, it was the same result I had on my screenshots)
• During this whole time, because I was trying to debug it, I had the "Inspector tools" of safari opened. At some point, by mistake, I closed it and the map just appeared like magic. I tried to do it again -> Same result

---> The correct issue is : On safari, when the map is displayed in full screen (100% width & height), the map is completely bugged when the web inspector tools is opened.

[Pessimistress]

Unfortunately I still cannot reproduce it with the information provided. I have tested with Safari + full screen + inspector tools open. I suspect it has to do with your particular dev environment and possibly extensions that you have installed. I'll keep this issue open in case anyone else experiences the same. As of this moment I don't see any evidence that your issue is caused by this library.