Vega-lite difference between Firefox and Chrome

Question

I have a vega-lite chart that shows up as expected in Chrome (72.0.3626.96), but not in Firefox (70.0.1). I have checked the spec in the Vega Editor. Does anyone know why this might be?

Here are the rendered charts:

Firefox:

Chrome:

Here is the spec:

Any help you might be able to give would be much appreciated.

Apologies, but I do not know how to collapse this code.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.2.1.json",
  "background": "white",
  "config": {"mark": {"tooltip": null}, "view": {"height": 300, "width": 400}},
  "datasets": {
    "data-511198e25d4dbee99248144390684caa": [

      {
        "counts": 338,
        "filter_method": "greater than",
        "grade": "9",
        "index": 3,
        "perc": 0.2669826224328594,
        "school_code": "Board",
        "threshold": "8",
        "year": 20172018,
        "year_lab": "2017/18",
        "year_lab_q": "2017"
      },
      {
        "counts": 414,
        "filter_method": "greater than",
        "grade": "9",
        "index": 4,
        "perc": 0.30689399555226093,
        "school_code": "Board",
        "threshold": "8",
        "year": 20182019,
        "year_lab": "2018/19",
        "year_lab_q": "2018"
      }
    ],
    "data-72a083843a98847e44077116c495e448": [
      {
        "counts": 49,
        "filter_method": "greater than",
        "grade": "9",
        "index": 0,
        "perc": 0.3356164383561644,
        "school_code": "KING",
        "threshold": "8",
        "year": 20142015,
        "year_lab": "2014/15",
        "year_lab_q": "2014"
      },

      {
        "counts": 62,
        "filter_method": "greater than",
        "grade": "9",
        "index": 5,
        "perc": 0.3668639053254438,
        "school_code": "MLTS",
        "threshold": "8",
        "year": 20162017,
        "year_lab": "2016/17",
        "year_lab_q": "2016"
      },
      {
        "counts": 53,
        "filter_method": "greater than",
        "grade": "9",
        "index": 6,
        "perc": 0.29608938547486036,
        "school_code": "KING",
        "threshold": "8",
        "year": 20172018,
        "year_lab": "2017/18",
        "year_lab_q": "2017"
      },
      {
        "counts": 44,
        "filter_method": "greater than",
        "grade": "9",
        "index": 7,
        "perc": 0.25882352941176473,
        "school_code": "MLTS",
        "threshold": "8",
        "year": 20172018,
        "year_lab": "2017/18",
        "year_lab_q": "2017"
      },
      {
        "counts": 53,
        "filter_method": "greater than",
        "grade": "9",
        "index": 8,
        "perc": 0.3212121212121212,
        "school_code": "KING",
        "threshold": "8",
        "year": 20182019,
        "year_lab": "2018/19",
        "year_lab_q": "2018"
      },
      {
        "counts": 61,
        "filter_method": "greater than",
        "grade": "9",
        "index": 9,
        "perc": 0.25206611570247933,
        "school_code": "MLTS",
        "threshold": "8",
        "year": 20182019,
        "year_lab": "2018/19",
        "year_lab_q": "2018"
      }
    ]
  },
  "height": 400,
  "layer": [
    {
      "data": {"name": "data-72a083843a98847e44077116c495e448"},
      "encoding": {
        "color": {
          "field": "school_code",
          "legend": {"labelFontSize": 15, "titleFontSize": 20},
          "title": null,
          "type": "nominal"
        },
        "tooltip": [
          {
            "field": "perc",
            "format": ".2%",
            "title": "percentage",
            "type": "quantitative"
          },
          {
            "field": "counts",
            "title": "number",
            "type": "quantitative"
          },
          {"field": "year_lab", "title": "school year", "type": "nominal"},
          {"field": "school_code", "title": "level", "type": "nominal"},
          {"field": "grade", "type": "nominal"},
          {"field": "filter_method", "type": "nominal"},
          {"field": "threshold", "type": "nominal"}
        ],
        "x": {
          "axis": {"format": "%Y", "tickCount": 5},
          "field": "year_lab_q",
          "scale": {"domain": ["2013.9", "2018.5"]},
          "title": "School Year (beginning)",
          "type": "temporal"
        },
        "y": {
          "axis": {"format": ".0%"},
          "field": "perc",
          "title": "Percentage",
          "type": "quantitative"
        }
      },
      "mark": {"point": true, "type": "line"},
      "selection": {
        "selector001": {
          "bind": "scales",
          "encodings": ["x", "y"],
          "type": "interval"
        }
      }
    },
    {
      "data": {"name": "data-511198e25d4dbee99248144390684caa"},
      "encoding": {
        "color": {
          "field": "school_code",
          "legend": {"labelFontSize": 15, "titleFontSize": 20},
          "scale": {"domain": ["Board"], "range": ["black"]},
          "title": null,
          "type": "nominal"
        },
        "tooltip": [
          {
            "field": "perc",
            "format": ".2%",
            "title": "percentage",
            "type": "quantitative"
          },
          {
            "field": "counts",
            "title": "number",
            "type": "quantitative"
          },
          {"field": "year_lab", "title": "school year", "type": "nominal"},
          {"field": "school_code", "title": "level", "type": "nominal"},
          {"field": "grade", "type": "nominal"},
          {"field": "filter_method", "type": "nominal"},
          {"field": "threshold", "type": "nominal"}
        ],
        "x": {"field": "year_lab_q", "type": "temporal"},
        "y": {"field": "perc", "type": "quantitative"}
      },
      "mark": {"point": true, "type": "line"}
    }
  ],
  "resolve": {"scale": {"color": "independent"}},
  "title": "A title!",
  "width": 700
}

Answer 1

It appears that your temporal values are not being parsed correctly in firefox (details of javascript date parsing behavior is often browser-dependent). You could try forcing the correct parsing by changing your data specification (in both places) to:

"data": {
  "name": "data-72a083843a98847e44077116c495e448",
  "format": {"parse": {"year_lab_q": "date:%Y"}}
}

This should ensure that the year string is parsed as a year, rather than e.g. a unix timestamp.

The other place date parsing is happening is in your domain specification. You might try changing those to a more standard time format, e.g.

"domain": ["2013-11-01", "2018-06-01"]