Interchange Image works in Firefox but only sometimes in Chrome

Can anyone help me figure out why in firefox interchange will load the image no problem every time. But in chrome it only works every now and again. I am also using a data-dropdown that only works when interchange does. But always works in Firefox.

Here is the code:

<img data-interchange="[/images/made/images/uploads/slider_images/slider- desktop_1920_800_c1.jpg, (default)],
              [/images/made/images/uploads/slider_images/slider-desktop_400_385_c1.jpg, (small)],
              [/images/made/images/uploads/slider_images/slider-desktop_888_450_c1.jpg, (phablet)],
              [/images/made/images/uploads/slider_images/slider-desktop_1024_565_c1.jpg, (medium)],
              [/images/made/images/uploads/slider_images/slider-desktop_1440_565_c1.jpg, (large)],
              [/images/made/images/uploads/slider_images/slider-desktop_1440_565_c1.jpg, (xlarge)],
              [/images/made/images/uploads/slider_images/slider-desktop_1920_800_c1.jpg,    (xxlarge)]">

Phablet is a custom media query that is defined.

Name the query:

$(document).foundation(
    'interchange', {
      named_queries : {
        phablet : 'only screen and (min-width:40.063em) and (max-width: 55em)'
      }
}

);

Set up Meta:

Foundation.utils.register_media('phablet', 'phablet');

Sass for Meta:

meta.phablet {
  font-family: "/only screen and (min-width: 40.063em) and (max-width: 55em)/";
  width: 40.063em;
}

Redfined Ranges:

$medium-range: (55.063em, 64em) !default; /* 881px, 1024px */
$phablet-range: (40.063em, 55em) !default;
$xlarge-range: (90.063em, 118em) !default;
$xxlarge-range: (118.063em) !default; 

js initialized with:

$(document).ready(function () {


$(document).foundation(
    'interchange', {
      named_queries : {
        phablet : 'only screen and (min-width:40.063em) and (max-width: 55em)'
      }
}

);
$(document).foundation('interchange', 'reflow');

$(document).foundation();

Foundation.utils.register_media('phablet', 'phablet');

I am using this in slick-slider but also just as a plain image on other pages.

Every thing works perfectly in Firefox.

In Chrome it works 50% of the time which is puzzling.

Any insights would be very much appreciated.