apply patch-3531-A0.diff from trac ticket #3531

lib/OpenLayers/Tile/BackBufferable.js

@@ -90,6 +90,22 @@ OpenLayers.Tile.BackBufferable = OpenLayers.Class(OpenLayers.Tile, {
      * Returns:
      * {DOMElement} A copy of the tile's markup.
      */
+
+    /**
+     * Method: getTileResolution
+     * Get the tile's actual resolution.
+     *
+     * Returns:
+     * {Number}
+     */
+    getTileResolution: function() {
+        var layer = this.layer,
+            map = layer.map,
+            mapResolution = map.getResolution();
+        return layer.getServerResolution ?
+                   layer.getServerResolution(mapResolution) :
+                   mapResolution;
+    },
     
     /**
      * Method: setBackBufferData
@@ -99,7 +115,7 @@ OpenLayers.Tile.BackBufferable = OpenLayers.Class(OpenLayers.Tile, {
     setBackBufferData: function() {
         this.backBufferData = OpenLayers.Util.extend(this.backBufferData, {
             bounds: this.bounds,
-            resolution: this.layer.map.getResolution()
+            resolution: this.getTileResolution()
         });
     },
     
@@ -119,8 +135,9 @@ OpenLayers.Tile.BackBufferable = OpenLayers.Class(OpenLayers.Tile, {
             data = this.backBufferData,
             tile = this.getTile(),
             backBuffer = data.tile,
-            resolution = data.resolution,
-            ratio = resolution ? resolution / map.getResolution() : 1,
+            prevResolution = data.resolution,
+            nextResolution = this.getTileResolution(),
+            ratio = prevResolution ? prevResolution / nextResolution : 1,
             
         // Cases where we don't position and return a back buffer, but only
         // update backBufferData and return undefined:
@@ -131,7 +148,8 @@ OpenLayers.Tile.BackBufferable = OpenLayers.Class(OpenLayers.Tile, {
             // (3) we don't have a tile available that we could use as buffer
             noTile = !(tile && tile.childNodes.length > 0),
             // (4) no backbuffer is displayed for a tile that's still loading
-            noBackBuffer = !backBuffer && this.isLoading;            
+            noBackBuffer = !backBuffer && this.isLoading;
+
         if (notNeeded || noParent || noTile || noBackBuffer) {
             this.setBackBufferData();
             return;
@@ -139,26 +157,26 @@ OpenLayers.Tile.BackBufferable = OpenLayers.Class(OpenLayers.Tile, {
 
         // Create a back buffer tile and add it to the DOM
         if (!backBuffer) {
-            backBuffer = this.createBackBuffer();
+            backBuffer = this.insertBackBuffer();
             // some browsers fire the onload event before the image is
             // displayed, so we keep the buffer until the whole layer finished
             // loading to avoid visual glitches
             layer.events.register("loadend", this, this.resetBackBuffer);
             data.tile = backBuffer;
-            layer.div.insertBefore(backBuffer, tile);
         }
 
         // Position the back buffer now that we have one
         var lonLat = {lon: data.bounds.left, lat: data.bounds.top},
-            position = map.getPixelFromLonLat(lonLat),
+            position = layer.getViewPortPxFromLonLat(lonLat, nextResolution),
             containerStyle = map.layerContainerDiv.style,
             leftOffset = parseInt(containerStyle.left, 10),
             topOffset = parseInt(containerStyle.top, 10),
             style = backBuffer.style;
-        style.left = (position.x - leftOffset) + "px";
-        style.top = (position.y - topOffset) + "px";
-        style.width = (this.size.w * ratio) + "px";
-        style.height = (this.size.h * ratio) + "px";        
+
+        style.left = (position.x - leftOffset) + "%";
+        style.top = (position.y - topOffset) + "%";
+        style.width = (this.size.w * ratio) + "%";
+        style.height = (this.size.h * ratio) + "%";
 
         return backBuffer;
     },

lib/OpenLayers/Tile/Image.js

@@ -187,10 +187,10 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
      */
     positionTile: function() {
         var style = this.frame.style;
-        style.left = this.position.x + "px";
-        style.top = this.position.y + "px";
-        style.width = this.size.w + "px";
-        style.height = this.size.h + "px";
+        style.left = this.position.x + "%";
+        style.top = this.position.y + "%";
+        style.width = this.size.w + "%";
+        style.height = this.size.h + "%";
     },
 
     /** 
@@ -320,14 +320,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
     },
 
     /**
-     * Method: createBackBuffer
-     * Create a copy of this tile's markup for the <layer>'s backBufferDiv
+     * Method: insertBackBuffer
+     * Create a copy of this tile's markup and insert it to the layer
+     * div.
      *
      * Returns:
-     * {DOMElement} a clone of the tile content
+     * {DOMElement} The back buffer.
      */
-    createBackBuffer: function() {
+    insertBackBuffer: function() {
         var frame = this.frame.cloneNode(false);
+        this.layer.div.insertBefore(frame, this.frame);
         frame.appendChild(this.imgDiv);
         this.imgDiv = null;
         return frame;