Fix clipping and clearing

src/ol/renderer/canvas/TileLayer.js

@@ -7,6 +7,7 @@ import TileState from '../../TileState.js';
 import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js';
 import CanvasLayerRenderer from './Layer.js';
 import {apply as applyTransform, compose as composeTransform, makeInverse, toString as transformToString} from '../../transform.js';
+import {numberSafeCompareFunction} from '../../array.js';
 
 /**
  * @classdesc
@@ -303,7 +304,9 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
         const h = nextY - y;
         const transition = z === currentZ;
 
-        if (clips && (!transition || tile.getAlpha(getUid(this), frameState.time) === 1)) {
+        const inTransition = transition && tile.getAlpha(getUid(this), frameState.time) !== 1;
+        if (!inTransition) {
+          if (clips) {
             // Clip mask for regions in this tile that already filled by a higher z tile
             context.save();
             currentClip = [x, y, x + w, y, x + w, y + h, x, y + h];
@@ -326,9 +329,12 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
             }
             clips.push(currentClip);
             clipZs.push(currentZ);
+          } else {
+            context.clearRect(x, y, w, h);
+          }
         }
         this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition, layerState.opacity);
-        if (clips) {
+        if (clips && !inTransition) {
           context.restore();
         }
         this.renderedTiles.push(tile);