Firefox console warning: Will-change memory consumption is too high.

[radumas]

Just changed to Leaflet 1.0.0-rc1 in my map app and got the following warning in the console for Firefox 47.0 for Ubuntu 16.04.

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1535100 px). Occurrences of will-change over the budget will be ignored.

[MattSidor]

Hi @radumas, we just ran into this issue as well. It seems to be a browser issue that may have been fixed since you posted this issue. Can you test again in the latest version of Firefox (51) and let us know if it still happens?

[radumas]

Hi @seadour. Went to the same page in Firefox 51.0.1 (64-bit) on Ubuntu 16.04 and the same warning appeared in the console. Let me know if there's anything else I can help with!

[MattSidor]

Thanks for trying. Have you upgraded to Leaflet 1.0.3? If so, is the page somewhere public where we can test it, or can you post a sample as a plunkr/jsfiddle for us?

[radumas]

I haven't updated yet! But I will do and will let you know if that changes anything. Also the map is ☝️, though it's not particularly simple.

[MattSidor]

Sounds good. I get the same error on your page with Firefox 51 for Mac. 🙁 (btw, nice app!)

[perliedman]

I'm not convinced this is actually a Leaflet problem.

Leaflet is hinting the browser about modifications it will do to the DOM (transform and opacity transitions), by using the will-change CSS property. No matter what the browser does with this hint, we will use transitions to animate opacity and transform of the tiles.

In this case Firefox informs us that it believes its optimizations for will-change would consume too much memory and ignore it, which is fine.

The reason you're seeing this problem after upgrading to Leaflet 1.0, is that will-change was not used at all in earlier versions of Leaflet.

I haven't profiled Leaflet with and without the will-change hint, but my interpretation is that we use it more or less exactly as described here: https://developer.mozilla.org/en/docs/Web/CSS/will-change - the only real alternative would be to rework how transitions are handled altogether - in itself a major refactor - and at least last time we benchmarked, CSS transitions still outperformed transitions implemented in JavaScript.

I'm closing this for now, since I don't see what Leaflet can do about this, but feel free to add suggestions and we'll consider reopening.

[jormun-pluxml]

This "problem" is still active with last version of firefox/leaflet.

Is it possible to add a leaflet option to completely disable the will-change hint ?

MDN recommends that the property be used as a last resort for existing performance issues rather than ones you anticipate could happen. And, when using it, it's recommended to toggle will-change just before an element or property changes and then toggle it off again shortly after the process is finished.

[perliedman]

@jormun-pluxml you can easily override it with a CSS rule.

[jormun-pluxml]

Thanks, that's what i finaly did :)

[abhasdudeja]

@jormun-pluxml you can easily override it with a CSS rule.

Can you please describe how to use will-change CSS rule to be used to counter this issue, i face the similar issue wherein my console gets this message when using leaflet to display local server shapefiles

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (705024 px). Occurrences of will-change over the budget will be ignored

[jormun-pluxml]

i did this :
.leaflet-fade-anim .leaflet-tile,.leaflet-zoom-anim .leaflet-zoom-animated { will-change:auto !important; }

[matkoniecz]

I haven't profiled Leaflet with and without the will-change hint, but my interpretation is that we use it more or less exactly as described here: https://developer.mozilla.org/en/docs/Web/CSS/will-change

It matched this page at time of posting this commment, but note that it has now

Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

box added in https://developer.mozilla.org/en-US/docs/Web/CSS/will-change$compare?locale=en-US&to=1392790&from=1342858 edit