diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 815eb0d0ae..c2ad2abfaa 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -300,6 +300,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 +758,12 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { * Remove back buffer from DOM. */ removeBackBuffer: function() { + if (this._transitionElement) { + OpenLayers.Event.stopObserving(this._transitionElement, 'transitionend', this._removeBackBuffer); + OpenLayers.Event.stopObserving(this._transitionElement, 'webkitTransitionEnd', this._removeBackBuffer); + OpenLayers.Event.stopObserving(this._transitionElement, 'otransitionend', this._removeBackBuffer); + delete this._transitionElement; + } if(this.backBuffer) { this.div.removeChild(this.backBuffer); this.backBuffer = null; @@ -1120,11 +1127,13 @@ 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; + OpenLayers.Event.observe(this._transitionElement, 'transitionend', this._removeBackBuffer); + OpenLayers.Event.observe(this._transitionElement, 'webkitTransitionEnd', this._removeBackBuffer); + OpenLayers.Event.observe(this._transitionElement, 'otransitionend', 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 ); } }