back buffer is not correctly repositioned

lib/OpenLayers/Layer/Grid.js

@@ -118,10 +118,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
     backBuffer: null,
 
     /**
-     * Property: lastResolution
+     * Property: backBufferData
-     * {Object} The last resolution of the grid.
+     * {Object} An object containing states necessary for the back buffer. It
+     * includes two state properties:
+     *  - *resolution* the last resolution of the tiles. Used as the "from
+     *    resolution" when transitioning.
+     *  - *lonlat* the geographic coordinates of the tiles grid's top-left
+     *    corner.
      */
-    lastResolution: null,
+    backBufferData: null,
 
     /**
      * Constructor: OpenLayers.Layer.Grid
@@ -145,6 +150,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         this.events.addEventType("tileloaded");
 
         this.grid = [];
+        this.backBufferData = {};
 
         this._moveGriddedTiles = OpenLayers.Function.bind(
             this.moveGriddedTiles, this
@@ -173,6 +179,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         this.clearGrid();
         this.grid = null;
         this.tileSize = null;
+        this.backBufferData = null;
         OpenLayers.Layer.HTTPRequest.prototype.destroy.apply(this, arguments); 
     },
 
@@ -259,6 +266,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             // the server-supported resolution for the new map resolution
             var serverResolution = this.getServerResolution(resolution);
 
+            // the last resolution of the tiles
+            var lastResolution = this.backBufferData.resolution;
+
             if (this.singleTile) {
                 
                 // We want to redraw whenever even the slightest part of the 
@@ -266,10 +276,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                 //  (thus, we do not specify partial -- its default is false)
                 if ( forceReTile ||
                      (!dragging && !tilesBounds.containsBounds(bounds))) {
-                    if(this.lastResolution === serverResolution ||
+                    if(lastResolution === serverResolution ||
-                       (this.lastResolution &&
+                       (lastResolution &&
                         this.transitionEffect === 'resize')) {
-                        this.insertBackBuffer(serverResolution, tilesBounds);
+                        this.applyBackBuffer(serverResolution);
                     }
                     this.initSingleTile(bounds);
                 }
@@ -301,9 +311,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
 
                 if(forceReTile) {
                     if(this.transitionEffect === 'resize' &&
-                       (this.lastResolution &&
+                       (lastResolution &&
-                        (this.lastResolution !== serverResolution))) {
+                        (lastResolution !== serverResolution))) {
-                        this.insertBackBuffer(serverResolution, tilesBounds);
+                        this.applyBackBuffer(serverResolution);
                     }
                     this.initGriddedTiles(bounds);
                 } else {
@@ -395,14 +405,13 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
     },
 
     /**
-     * Method: insertBackBuffer
+     * Method: applyBackBuffer
-     * Insert a back buffer for a better transition.
+     * Create, insert, scale and position a back buffer for the layer.
      *
      * Parameters:
      * resolution - {Number} The resolution to transition to.
-     * tilesBounds - {<OpenLayers.Bounds>} The current bounds of the tiles.
      */
-    insertBackBuffer: function(resolution, tilesBounds) {
+    applyBackBuffer: function(resolution) {
         var backBuffer = this.backBuffer;
         if(!backBuffer) {
             backBuffer = this.createBackBuffer();
@@ -415,14 +424,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
 
         var style = backBuffer.style;
 
-        // scale
+        // scale the back buffer
-        var ratio = this.lastResolution / resolution;
+        var ratio = this.backBufferData.resolution / resolution;
         style.width = 100 * ratio + '%';
         style.height = 100 * ratio + '%';
 
-        // and position
+        // and position it (based on the grid's top-left corner)
         var position = this.getViewPortPxFromLonLat(
-            {lon: tilesBounds.left, lat: tilesBounds.top}, resolution);
+                this.backBufferData.lonlat, resolution);
         var leftOffset = parseInt(this.map.layerContainerDiv.style.left, 10);
         var topOffset = parseInt(this.map.layerContainerDiv.style.top, 10);
         backBuffer.style.left = (position.x - leftOffset) + '%';
@@ -463,6 +472,17 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         return backBuffer;
     },
 
+    /**
+     * Method: updateBackBufferData
+     * Upstate states in the backBufferData property
+     */
+    updateBackBufferData: function() {
+        this.backBufferData.resolution = this.getServerResolution();
+        var topLeftTile = this.grid[0][0];
+        this.backBufferData.lonlat = {lon: topLeftTile.bounds.left,
+                                      lat: topLeftTile.bounds.top};
+    },
+
     /**
      * Method: moveByPx
      * Move the layer based on pixel vector.
@@ -887,7 +907,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                     this.backBuffer = null;
                 }
                 if(this.map) {
-                    this.lastResolution = this.getServerResolution();
+                    this.updateBackBufferData();
                 }
             }
         };