Broken GridLayer zoom animation in angular production build

[t-denis]

In Angular production build zoom animation is broken (unfocused double image, hard to explain) if using mouse scroll.

Looks like modern minification tools consider this call as a pure function with an unused result, and decide to remove these lines: https://github.com/Leaflet/Leaflet/blob/984fedda1c48d141f018ca45ae06738872d7f5dd/src/layer/tile/GridLayer.js#L393-L394

Can be fixed by adding some side-effects to offsetWidth or Util.falseFn. For example:

if (level.el.offsetWidth < 0) {
  console.log(level.el.offsetWidth);
}

export function falseFn() {
  if (arguments.length < 0) {
    console.log(arguments.length);
  }
  return false;
}

[IvanSanchez]

Hi, and thanks for taking the time to open a bug report in Leaflet.

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

• React
• Ractive
• AngularJS
• Bootstrap
• Leaflet for R
• Joomla
• Wordpress
• Ionic
• Cordova
• Vue
• Electron
• Polymer
• TypeScript
• D3
• Folium
• ...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropriate repo.

[IvanSanchez]

This rather looks like a bug in whatever minification tool you're using.

[Ploppy3]

@t-denis I tried to modify the falseFn function of the Util.js file directly from the node_modules but the animation is still broken. What am I doing wrong?

[t-denis]

@Ploppy3 Try to modify files in dist folder, not src. Also note, that changes in node_modules can be lost after adding/removing/reinstalling packages.

[Ploppy3]

@t-denis Yeah thanks. Ended up forking leaflet modifying the files adding it to my project.

[danmana]

@Ploppy3 Try to modify files in dist folder, not src. Also note, that changes in node_modules can be lost after adding/removing/reinstalling packages.

With patch-package you can make the changes in node_modules persistent.

1. npm install --save-dev patch-package

2. in package.json scripts add

   "scripts": {
   "postinstall": "patch-package && ngcc"
   }

3. Modify node_modules/leaflet/dist/leaflet-src.js and node_modules/leaflet/dist/leaflet-src.esm.js as suggested

   function falseFn() {
       if (arguments.length < 0) {
           console.log(arguments.length);
       }
       return false;
   }

4. Run npx patch-package leaflet

Now everytime somebody does an install, patch-package will take care to apply the falseFn patch

[Ploppy3]

@danmana Quite interesting, I didn't know about this. Thank you very much.