user-scalable=no but still able to scale entire page on web map application?

I have a web application that is essentially a map (mapbox) with some d3.js points overlayed, filters, etc.

My issue is that when zooming in on the map using pinch (mobile), when I accidentally pinch over one of the points, or one of the map pop-ups, the entire page zooms (i.e. scaling). This is a fairly common occurrence. I only want user to be able to zoom the map, not the page itself.

I've implemented:

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

And still the behavior persists. I've also tried this:

 document.addEventListener("touchstart", function(e){
 e.preventDefault();
 },{passive: false});

 document.getElementById('map').addEventListener('touchstart', function(e){e.stopPropagation()}, false);

But this is cumbersome and doesn't exactly work the greatest because it involved limiting event-listeners one element at a time. Shouldn't the user-scalable argument in the HTML be enough? I don't understand why this is happening. Thanks.

from user-scalable=no but still able to scale entire page on web map application?