Background leaflet image TileLayer goes black when returning to frozen tab

I am building a map website using leaflet.

Sometimes when the map is open on a Chrome browser tab, if you switch back to that tab the background map image will be black, and the only way to get it back is by zooming and and out enough or by refreshing the page.

I have tried to reproduce the problem by using Chrome://discards but freezing the tab and returning to it does not trigger the problem.

I have tried setting up an event handler for the visibility change and resume events that calls map.invalidateSize and the tilelayer redraw function but this also doesn't prevent the problem.

The only reasonably reliable way I have found to reproduce the problem is:

Open map in android chrome

Select a different tab

Switch to another app and use it actively for some minutes

Return to chrome app

Select the tab with the map open

At this point the map background will show black instead of showing the map bitmap.

Any suggestions on what might be causing it, how to fix it or how to debug it?

Thanks

This is the code I'm currently trying as a workaround:

window.addEventListener('visibilitychange', () => { if (!window.document.hidden && map) { map.invalidateSize(); } }); window.document.addEventListener('resume', () => { if (map) { map.invalidateSize(); // Retreive the TileLayer object and call redraw MapLayer.getLayerObj(map.mapId).redraw(); } });

As yet I have not managed to create a minimal reproducible case, I'm more looking for ideas or directions to look at the moment.