OpenLayers: Zoom level cropping VectorTile layer - how to fix?

Question

I want to use TopoJSON data as a VectorTile layer for an OpenLayers map. When the map's zoom level is set to 3 or less, the full VectorTile layer is displayed, but at zoom level 4 or greater, the VectorTile layer is cropped and doesn't display fully. This can vary depending on screen size, but the issue remains (on another machine, it fully renders at zoom level 4, but not at zoom level 5+).

What is causing this to happen and how can I fix it?

const style_background = new ol.style.Style({
  fill: new ol.style.Fill({
      color: "orange",
  }),
  stroke: new ol.style.Stroke({
      color: "black",
      width: 2,
  }),
});

const background = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
        url: "https://gist.githubusercontent.com/Sidders22/5d0115942b29ac10041cbe32890c8018/raw/10e3424d31adbe794ed9b6485f49a8aee256c22a/background.json",
        format: new ol.format.TopoJSON({
          layerName: 'background',
        }),
        wrapX: false,
        overlaps: false,
    }),
    style: style_background,
    className: "basemap-background"
});


const basemap = new ol.layer.Tile({
  source: new ol.source.OSM()
});

const map = new ol.Map({
  controls: [],
  target: 'map',
  layers: [
    basemap,
    background
  ],
  view: new ol.View({
    center: [-14087813.253324818, 7279263.097399168],
    zoom: 4
  })
});

Answer 1

VectorTile only works well with tiled data, rather than straightforward vectors.

Using VectorLayer instead.