apps.bostonglobe.com - see bug description

[bslassey]

URL: https://apps.bostonglobe.com/metro/graphics/2016/12/snow-totals/ Browser / Version: Firefox Mobile 51.0 Operating System: Android 7.1.1 Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: https://apps.bostonglobe.com/metro/graphics/2016/12/snow-totals/
2. …

Expected Behavior: map shows

Actual Behavior: map doesn't show in Firefox, works in chrome

From webcompat.com with ❤️

[karlcow]

What it looks like in Firefox (responsive mode of firefox desktop with mobile UA)

switching to a UA chrome doesn't fix it.

Some errors in the console.

The map is generated when the page is loaded.

<div class="observed-snowfall">
     <div class="observed-snowfall__map"></div>
</div>

So I guess it doesn't reach this part or fail in this part https://apps.bostonglobe.com/metro/graphics/2016/12/snow-totals/bundle.js?v=1486921695561

  f = function (n) {
    var t = (0, a.select) ('.observed-snowfall__map'),
    r = L.Mapzen.map(t, {
      center: [
        42.204,
        - 71.8674
      ],
      zoom: 7,
      scene: 'assets/scene.yaml?q=' + o['default'].version,
      minZoom: 2,
      maxZoom: 10,
      apiKey: 'mapzen-v3U3y5X'
    });
    r.attributionControl.addAttribution('<a href="http://www.weather.gov/erh/hydromet">NWS</a>');
    var e = L.Mapzen.locator();
    e.addTo(r);
    var u = void 0;
    r.on('tangramloaded', function (t) {
      u = t.tangramLayer.scene,
      u.setDataSource('_snowtotals', {
        type: 'TopoJSON',
        url: n
      })
    })
  };

The map is provided by the excellent people at mapzen https://mapzen.com/

When it is working in Blink, it initializes a leaflet container.

<div class="observed-snowfall__map leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" 
      tabindex="0" 
      style="position: relative;">

</div>

seeing the

    var u = void 0;

I wonder if it is something similar to https://bugzilla.mozilla.org/show_bug.cgi?id=1291967

which was a security issue.

[karlcow]

Pushing to needsdiagnosis.

[karlcow]

(for needscontact eventually, if the issue comes from mapzen code, I know someone there.)

[wisniewskit]

It's this code near the end of Boston Globe's script that's causing the security error (which is causing the map to not load):

function u(){
  if(o["default"].any())
  for(var n=document.styleSheets.length-1;n>=0;n--){
    var t=document.styleSheets[n];
    /* snip */
  }
}

Basically, they cannot access document.styleSheets in this context. Putting a try/catch around the for loop seems to be enough to get the map to load, but it's tough to know if that's a sufficient "fix" or not.

[karlcow]

thanks @wisniewskit In the past @gabrielflorit helped us on @BostonGlobe issues.

[karlcow]

still the same as of now. ping @gabrielflorit

[adamopenweb]

Issue still exists.

Maybe @michaelworkman or @tdukart can help with this issue?

[gabrielflorit]

Sorry I can't be of more assistance - I don't work at the Boston Globe anymore. But @michaelworkman might be able to help.

[michaelworkman]

This page has been replaced by https://apps.bostonglobe.com/northeast-snow-totals/. We have requested a redirect to the new page.

[adamopenweb]

Thank you both! Closing this issue.