Leaflet: leaflet-controls flashing

[rendrom]

I want to describe the situation of leaflet-controls flashing with a lot of downloaded layers in Google Chrome. Demonstration of this effect on the video below

Look video example for leaflet 1.2.0

Look video example for leaflet 0.7.7

In the test application, the flashing occurs at 100 or more layers. But in a real application (connection via rdp), blinking can occur with 10-20 added layers.

Code

[rendrom]

sorry for the music in the videos

[Strang00]

I can confirm this bug and have additional info:

1. It stably reproduced in Chrome for Windows versions from v52 to current v62 (tested on different PC), it never happens in IE and FF.
2. This trouble could be reproduced on any PC just with 10-15 layers when Chrome setting 'Use hardware acceleration when available' is disabled (on modern office desktop PC with integrated Intel GPU on board). Without accelaration 50 layers caused all map controls to disappear from screen at all.

[dmartinezi]

I have the same issue with leaflet v1.3.3.
In a Chrome v63 the controls flash and fade out when loading layers.
In Firefox it runs without problems.

Any news or workarounds about this problem?

[marlo22]

I also have this problem. If I have more layers on the map in Chrome browser Leaflet's controls are flashing, but in Firefox in the same case everything works well. What can we do to resolve this issue? Help us, please.

When I open "Rendering developer tool" (press Ctrl+Shift+P and find "Show rendering" option) and check option "FPS meter" I see that the consumption of GPU is very high - in my case 512 MB/512 MB. Maybe should we try going this path? Is any possibility to limit this consumption?

[marlo22]

We've found a solution. When tiles are not <img> elements, but rather are drawn on the canvas, GPU consumption looks much better. We've prepared package for this. You can check it here - https://github.com/GIAPspzoo/L.TileLayer.Canvas. I hope it'll help you.