title: Openlayers3: tile grid incorrect with pixelratio=3 using Geoserver/Geowebcache as backend
body: <p>I'm developing a small webmap using Openlayers3 and geoserver/geowebcache as backend.</p>
  
  <p>My goal is to support browsers/displays with pixelratio=1, pixelratio=2 and pixelratio=3.</p>
  
  <p>For that I defined in geoserver backend 3 gridsets with tiles sizes 256x256, 512x512 and 768x768.
  I assume that:</p>
  
  <ul>
  <li>pixelratio=1 requires a gridset with tiles sizes 256x256</li>
  <li>pixelratio=2 requires a gridset with tiles sizes 512x512</li>
  <li>pixelratio=3 requires a gridset with tiles sizes 768x768</li>
  </ul>
  
  <p>Now, my code is working only for pixelratio=1 and pixelratio=2.
  But if pixelratio=3 geowebcache returns a error:</p>
  
  <pre><code>geowebcache-cache-result:MISS
  geowebcache-miss-reason:request does not align to grid(s) 'grid_512' 'grid_768' 'grid_256'
  </code></pre>
  
  <p>If pixelratio=3 Openlayers generates such a URL:</p>
  
  <pre><code>http://localhost:8082/wms?SERVICE=WMS&amp;VERSION=1.1.1&amp;REQUEST=GetMap&amp;FORMAT=image%2Fpng&amp;TRANSPARENT=false&amp;layers=mfn_mwb17%3Amfn_mwb17_0_basemap&amp;TILED=true&amp;WIDTH=768&amp;HEIGHT=768&amp;SRS=EPSG%3A32632&amp;STYLES=&amp;FORMAT_OPTIONS=dpi%3A270&amp;BBOX=536964.8438079988%2C5280880.182948656%2C537609.9638079988%2C5281525.3029486565
  </code></pre>
  
  <p>Openalayers changes the tiles sizes to 768x768 and DPI to 270 but apparently does not calculate correctly the grid.</p>
  
  <p>The demo map in Geoserver (based on Openlayers2) works with all 3 grid sets.</p>
  
  <p>I'm using geoserver 2.10 and google chrome.
  This is my code so far. Resolutions and bounds are the same for all 3 grid sets in backend. Any help is appreciated:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;WMS Tiles&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css"&gt;
      &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
      &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
      &lt;script src="https://openlayers.org/en/v3.19.1/build/ol.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map" class="map"&gt;&lt;/div&gt;
  &lt;script&gt;
      console.log("DOMContentLoaded");
      try {
          var config = {
              "bounds": {
                  "left": 536319.7238079988,
                  "bottom": 5278944.822948656,
                  "right": 540150.3790103362,
                  "top": 5282223.663765706
              }
          };
  
          var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top];
          var resolutions = [2.5199999999999996,
              1.2599999999999998,
              0.6299999999999999,
              0.31499999999999995,
              0.15749999999999997,
              0.07874999999999999,
              0.03937499999999999
          ];
  
          var projection = new ol.proj.Projection({
              code: 'EPSG:32632'
          });
  
          var params = {
              'VERSION': '1.1.1',
              'layers': "mfn_mwb17:mfn_mwb17_0_basemap",
              'TILED': true,
              'TRANSPARENT': false
          };
  
          var tileGrid = new ol.tilegrid.TileGrid({
              extent: bounds,
              resolutions: resolutions,
              origin: [config.bounds.left, config.bounds.bottom],
              tileSize: [256, 256]
          });
          var view = new ol.View({
              zoom: 0,
              center: ol.extent.getCenter(bounds),
              projection: projection,
              resolutions: resolutions
          });
  
          var map = new ol.Map({
              controls: ol.control.defaults(
                  {
                      rotate: false,
                      attributionOptions: {
                          collapsible: false
                      }
                  }
              ),
              view: view,
              layers: [
                  new ol.layer.Tile({
                      source: new ol.source.TileWMS({
                          url: "http://localhost:8082/wms",
                          params: params,
                          tileGrid: tileGrid,
                          serverType: 'geoserver'
                      }),
                      projection: projection,
                      extend: bounds
                  })
              ],
              target: 'map'
          });
          console.log("no error");
      } catch (error) {
          console.log("error");
          console.log(error);
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>