no longer rely on the transitionend event, unwanted flashes are avoid using a timer

lib/OpenLayers/Layer/Grid.js

@@ -138,6 +138,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      */
     backBufferLonLat: null,
 
+    /**
+     * Property; backBufferTimerId
+     * {Number} The id of the back buffer timer. This timer is used to
+     *     delay the removal of the back buffer, thereby preventing
+     *     flash effects caused by tile animation.
+     */
+    backBufferTimerId: null,
+
     /**
      * Register a listener for a particular event with the following syntax:
      * (code)
@@ -190,6 +198,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             window.clearTimeout(this.timerId);
             this.timerId = null;
         }
+        if(this.backBufferTimerId !== null) {
+            window.clearTimeout(this.backBufferTimerId);
+            this.backBufferTimerId = null;
+        }
     },
 
     /**
@@ -197,9 +209,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * Deconstruct the layer and clear the grid.
      */
     destroy: function() {
+        this.removeBackBuffer();
         this.clearGrid();
-        // clearGrid should remove any back buffer from the layer,
-        // so no need to call removeBackBuffer here
 
         this.grid = null;
         this.tileSize = null;
@@ -530,6 +541,17 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         }
     },
 
+    /**
+     * Method: scheduleBackBufferRemoval
+     */
+    scheduleBackBufferRemoval: function() {
+        if(this.backBufferTimerId !== null) {
+            window.clearTimeout(this.backBufferTimerId);
+        }
+        this.backBufferTimerId = window.setTimeout(
+            OpenLayers.Function.bind(this.removeBackBuffer, this), 800);
+    },
+
     /**
      * Method: moveByPx
      * Move the layer based on pixel vector.
@@ -930,8 +952,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             //if that was the last tile, then trigger a 'loadend' on the layer
             if (this.numLoadingTiles == 0) {
                 this.events.triggerEvent("loadend");
-                this.removeBackBuffer();
-            }
+                if(this.backBuffer) {
+                    // the removal of the back buffer is delayed to prevent flash
+                    // effects due to the animation of tile displaying
+                    this.scheduleBackBufferRemoval();
+                }
+        }
         };
         tile.events.register("loadend", this, tile.onLoadEnd);
         tile.events.register("unload", this, tile.onLoadEnd);