Partial Drawing of dynamicMapLayer in Safari

[lrpatterson]

Describe the bug

I have a list of layers that users can turn on and off at will, a user is reporting that they are only ever able to see half of a certain layer drawing when turned on. This is the layer in question: https://location.cabarruscounty.us/arcgisservices/rest/services/DataExplorerDatasets/MapServer/1.

When the user pans or zooms half of the screen updates while the other half remains undrawn. I have map.invalidateSize setup to refresh when user resizes the screen and what not but seems that the drawing issue persists and only does so in Safari version 13.1. All other browsers seem to be fine as I cannot reproduce the issue

Screenshots

Environment Information

• Version of Leaflet (L.version): 1.6.0

• Version of Esri Leaflet (L.esri.VERSION): 2.4.1

• Browser and Version: Safari 13.1

Additional context

Also be aware that the layer in question is an annotation layer.

[gavinr]

Thanks for the report. Could you please:

1. Let us know: What Operating System(s) and version(s) does this happen on?
2. Create a JsBin (https://jsbin.com, or codepen, codesandbox, etc) that shows a minimum replication case that your issue occurs in?

Thanks!

[lrpatterson]

Sure I have the versions above for browser that is the issue and all relevant package versions.

Here is a demo repo: https://codesandbox.io/s/minimal-demo-znhng.

[gavinr]

Thanks - what are the replication steps?

[samlanzz]

@lrpatterson we are experiencing the same issue in our implementation. Were you able to solve this issue, and if so, how?

[lrpatterson]

@vlanz I was not able to solve this. It seems to only affect safari. I am guessing it is an issue with CSS and not the JS side of things.

[lrpatterson]

@vlanz Do you have another minimum replication case that can be shared?

[samlanzz]

@lrpatterson I am working on creating one now.

[samlanzz]

Ok, after some tinkering I think I have a working replication here: https://stackblitz.com/edit/angular-ivy-sk8qzv The replication steps are as follows:

1. Have an iOS device (I was able to test it on iOS 13 and iOS 14, iPad mini and iPad Pro)
2. Open the replication app in iOS Safari, private mode: https://angular-ivy-sk8qzv.stackblitz.io
3. If the layer loads correctly, try to zoom in and out, pan, move the map around. At some point you should be able to see the DynamicMapLayer only loaded halfway through the screen as the screenshot below shows:

[jwasilgeo]

Hi all, I could not reproduce this issue on an iPhone 11 iOS 15 Safari. Is this only happening on iPads?

[samlanzz]

The problem with this is that it does not seem like it can be reproduced consistently - I changed nothing about the code and sometimes the problem occurs, sometimes it does not. I can't put my finger on what this is caused by (timing? Package versions? Cached data?). I can most consistently reproduce it when run locally using "npm run start-ios" and debugging on a device in the same network. Today I was able to see the problem happen in MacOS Safari as well, by the way:

[samlanzz]

I was able to capture the behaviour on video on my MacBook Pro, Big Sur 11.5.2, Safari Version 15.0 (16612.1.29.41.4, 16612) https://user-images.githubusercontent.com/17550954/138065994-67ebaec1-8b43-4d2b-b82b-862440364a5d.mov

[samlanzz]

It seems like the entire layer is actually getting loaded via HTTP Request, but then does not get drawn fully:

[nicolaiwolko]

The bug is related to a (not so well known) problem of safari when decoding images too often in main thread. See PR: https://github.com/Esri/esri-leaflet/pull/1302