Image overlay incorrectly positioned until window resize starting Chromium 116.0.5833.0

[FluorescentHallucinogen]

Checklist

• I've looked at the documentation to make sure the behavior isn't documented and expected.
• I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I've searched through the current issues to make sure this hasn't been reported yet.
• I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

I have a very old project with a kiloton of legacy (Knockout, Pug, etc.) code that has been working great all this time until recently. The code hasn't changed in years!

Here's the built demo: https://leaflet-bug-repro.web.app/?locale=en-US&baseUrl=https://api-mobile-c-y01-test.eventicious.com#/exponents/5706/map

I've found the same problem on https://stackoverflow.com/q/75672120.

The bug is only reproducible in Chromium-based browsers and is not reproducible in Firefox and Safari.

I've figured out the exact Chromium version from which the bug started to reproduce:

116.0.5833.0 (1157849) 2023-06-14
(https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/1157849/)
<- The bug is not yet reproducible in this build

116.0.5833.0 (1157885) 2023-06-15
(https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/1157885/)
<- The bug is already reproduced in this build

The OS doesn't matter. The bug is reproducible e.g. on Windows and Android.

Expected behavior

The image overlay is initially displayed into the expected position (almost in the center of the screen).

Current behavior

The image overlay is initially displayed mostly off screen, but if the browser window is resized it pops into the expected position.

Minimal example reproducing the issue

https://leaflet-bug-repro.web.app/?locale=en-US&baseUrl=https://api-mobile-c-y01-test.eventicious.com#/exponents/5706/map

Environment

• Leaflet version: any
• Browser (with version): Chrome 116.0.5833.0+
• OS/Platform (with version): any

[FluorescentHallucinogen]

@mourner The same code that uses Leaflet started to work incorrectly in Chromium-based browsers starting from version 116.0.5833.0. Please help figure out exactly what has changed. It looks like Leaflet relies on some thing in the browser engine that has changed. I'm worried that this will affect other aspects of Leaflet for many people around the world.

[FluorescentHallucinogen]

I was able to narrow the search down to:

Chromium r1157874 <- The bug is not yet reproducible in this build

Chromium r1157885 <- The bug is already reproduced in this build

Only 11 commits between!

I've tried to use https://omahaproxy.appspot.com to see the commit history between r1157874 and r1157885, but at first glance I couldn't find anything to affect Leaflet.

[FluorescentHallucinogen]

I was able to narrow the search down to just 6 commits:

Chromium r1157879 <- The bug is not yet reproducible in this build

Chromium r1157885 <- The bug is already reproduced in this build

[Falke-Design]

Before we dig more into this, can you please check if it is also happening with the latest version of Leaflet (1.9.4). And please try to setup a demo on www.leafletjs.com/edit.html

[grundmanise]

Had the same issue in Safari 17.2.1 (19617.1.17.11.12) (MacBook M1 Pro) with Leaflet v1.9.4. Seems adding the below "hack" fixed it for me:

   map.whenReady(() => {
      if (L.Browser.safari) {
       map.invalidateSize();
      }
    });

p.s. was not able to reproduce in the plnkr above.