ESRI tile service not loading correctly in web maps

Question

I tried to use the example from openlayers 3 xyz example to create a webmap from this service http://maps.gov.bc.ca/arcgis/rest/services/Province/web_mercator_cache/MapServer but the map rendered is not complete. It is better with the wrapX: false but the issue is not resolved. It also fails to display correctly using Leaflet.

Here is JS fiddle with the OL3 code.

http://jsfiddle.net/7ettuy1c/

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: "http://maps.gov.bc.ca/arcgis/rest/services/Province/web_mercator_cache/MapServer" +
            '/tile/{z}/{y}/{x}'
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-118, 51.5]),
    zoom: 1
  })
});