Fix #1228 safari partially rendering

[nicolaiwolko]

Problem

See issue 1228 (https://github.com/Esri/esri-leaflet/issues/1228) Safari sometimes only partially renders the image layer.

Solution

The bug is related to the leaflet library. Safari seems to have problems decoding too many images in main thread. I would suggest leaflet maintainers to switch from img to canvas to avoid such decoding problems.

In the meantime setting the img.decoding attribute to "async" will fix the bug and ensures full rendering of the layer image.

Stackblitz with bugfix: https://stackblitz.com/edit/web-platform-dmw9yg?file=esri-leaflet-debug.js

[gavinr]

Thank you for investigating and for the PR! We really appreciate your time.

In the stackblitz example, I'm noticing a "flash" of the layer when I zoom in. Here's a video (in the video it only happens once because the frame rate of the recording - it does actually happen on every zoom for me):

https://user-images.githubusercontent.com/209355/144464145-536b7a5f-ca1c-4450-b963-58dd26c51cd1.mp4

(happening me on Windows 10, Chrome v96.0.4664.45)

Is this happening for you too?

[gavinr]

Inactive - closing.