OpenLayers 6.5.0: Features disappear when zooming in

When zooming in, all features disappear. The features are on either side of the antimeridian. In order to be able to use modify interaction, the geographical lengths of some features exceed the value of 180 degrees.

Any help is welcome!

var coords = [
  [32100000, -7900000],
  [28900000, -9700000],
  [26300000, -10000000],
  [23800000, -9300000],
  [20400000, -6500000]
];

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var featuresLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
});

var map = new ol.Map({
  layers: [osmLayer, featuresLayer],
  target: document.getElementById("map")
});

var s = featuresLayer.getSource();
for (var i = 0; i < coords.length; i++) {
  s.addFeature(new ol.Feature({
    geometry: new ol.geom.Point(coords[i])
  }));
}

map.setView(new ol.View({
  center: coords[parseInt(coords.length / 2)],
  zoom: 3,
  maxZoom: 18,
  minZoom: 3
}));

html,
      body,
      .map {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<div id="map" class="map"></div>

Solution

Per @Mike's comment, use new ol.source.Vector({wrapX: false}) if your coordinates exceed the normal world

var featuresLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false})
});

updated code snippet:

var coords = [
  [32100000, -7900000],
  [28900000, -9700000],
  [26300000, -10000000],
  [23800000, -9300000],
  [20400000, -6500000]
];

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var featuresLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false})
});

var map = new ol.Map({
  layers: [osmLayer, featuresLayer],
  target: document.getElementById("map")
});

var s = featuresLayer.getSource();
for (var i = 0; i < coords.length; i++) {
  s.addFeature(new ol.Feature({
    geometry: new ol.geom.Point(coords[i])
  }));
}

map.setView(new ol.View({
  center: coords[parseInt(coords.length / 2)],
  zoom: 3,
  maxZoom: 18,
  minZoom: 3
}));

html,
      body,
      .map {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<div id="map" class="map"></div>