diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 815eb0d0ae..a8c1912730 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -285,6 +285,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { */ rowSign: null, + /** + * Property: transitionendEvents + * {Array} Event names for transitionend + */ + transitionendEvents: [ + 'transitionend', 'webkitTransitionEnd', 'otransitionend', + 'oTransitionEnd' + ], + /** * Constructor: OpenLayers.Layer.Grid * Create a new grid layer @@ -300,6 +309,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { arguments); this.grid = []; this.tileQueue = []; + this._removeBackBuffer = OpenLayers.Function.bind(this.removeBackBuffer, this); if (this.removeBackBufferDelay === null) { this.removeBackBufferDelay = this.singleTile ? 0 : 2500; @@ -757,6 +767,13 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { * Remove back buffer from DOM. */ removeBackBuffer: function() { + if (this._transitionElement) { + for (var i=this.transitionendEvents.length-1; i>=0; --i) { + OpenLayers.Event.stopObserving(this._transitionElement, + this.transitionendEvents[i], this._removeBackBuffer); + } + delete this._transitionElement; + } if(this.backBuffer) { this.div.removeChild(this.backBuffer); this.backBuffer = null; @@ -1120,11 +1137,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { this.loading = false; this.events.triggerEvent("loadend"); if(this.backBuffer) { - // the removal of the back buffer is delayed to prevent flash - // effects due to the animation of tile displaying + this._transitionElement = tile.imgDiv; + for (var i=this.transitionendEvents.length-1; i>=0; --i) { + OpenLayers.Event.observe(this._transitionElement, + this.transitionendEvents[i], + this._removeBackBuffer); + } + // the removal of the back buffer is delayed to prevent // flash effects due to the animation of tile displaying this.backBufferTimerId = window.setTimeout( - OpenLayers.Function.bind(this.removeBackBuffer, this), - this.removeBackBufferDelay + this._removeBackBuffer, this.removeBackBufferDelay ); } }