title: Openlayers / Openstreetmap background is vertically striped and squished
body: <p>So the background of my openlayers implementation appears to be squished into vertical stripes.  The weird thing is that it wasn't always like this but even when I stash all my changes back to a point where I know it was working, it still is broken.  It makes me wonder if perhaps something has changed about the way the tile assets are being delivered.  I have tried switching between using osm and wms layers with no change, any help would be appreciated.</p>
  
  <p>Here is the pertinent code:  </p>
  
  <pre><code>initMap: function() {
    var view = this;
    var map = this.map = new OpenLayers.Map();
    map.render(this.$map[0]);
  
    var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
      "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
  
    var osmLayer = new OpenLayers.Layer.OSM();
  
    this.layers = {
      point: new OpenLayers.Layer.Vector("Point Layer"),
      line: new OpenLayers.Layer.Vector("Line Layer"),
      polygon: new OpenLayers.Layer.Vector("Polygon Layer")
    };
  
    this.setValue(this.value);
  
    map.addLayers([this.layers.point, this.layers.line, this.layers.polygon, osmLayer]);
  
    drawControls = {
      point: new OpenLayers.Control.DrawFeature(this.layers.point,
        OpenLayers.Handler.Point),
      line: new OpenLayers.Control.DrawFeature(this.layers.line,
        OpenLayers.Handler.Path),
      polygon: new OpenLayers.Control.DrawFeature(this.layers.polygon,
        OpenLayers.Handler.Polygon)
    };
  
    this.layers[this.layerType].events.on({'sketchcomplete': function(feature) {
  
      if (!view.multiple) {
        // deactivate polygon layer once a polygon has been added
        drawControls[view.layerType].deactivate();
      }
  
    }});
  
    for(var key in drawControls) {
      map.addControl(drawControls[key]);
    }
  
    if (this.layers[this.layerType].features.length) {
      var bounds = this.layers[this.layerType].getDataExtent();
      var zoom = this.layers[this.layerType].getZoomForExtent(bounds);
      var lon = (bounds.top - bounds.bottom) / 2;
      var lat = (bounds.right - bounds.left) / 2;
      map.setCenter(new OpenLayers.LonLat(lon,lat), 3);
      map.zoomToExtent(bounds);
  
      if (view.multiple) {
        drawControls[view.layerType].activate();
      }
  
    } else {
      map.setCenter(new OpenLayers.LonLat(-11174482.03751,4861394.9982606), 4);
      drawControls[view.layerType].activate();
    }
  
    this.$('.clear').click(function(e) {
      e.preventDefault();
      view.layers[view.layerType].destroyFeatures();
      drawControls[view.layerType].activate();
    });
  },
  </code></pre>
  
  <p>Here is the output:</p>
  
  <p><img src="https://i.stack.imgur.com/5C4pG.png" alt="here is the output"></p>