diff --git a/examples/mapswipe-ref.png b/examples/mapswipe-ref.png
index 121b8e7de45d..dd6520ec175e 100644
Binary files a/examples/mapswipe-ref.png and b/examples/mapswipe-ref.png differ
diff --git a/src/map/swipe.js b/src/map/swipe.js
index 92547346f79c..09192654b800 100644
--- a/src/map/swipe.js
+++ b/src/map/swipe.js
@@ -193,12 +193,32 @@ export class SwipeController {
       ctx.clip();
     } else {
       // ctx instanceof WebGLRenderingContext
-      ctx.clear(ctx.COLOR_BUFFER_BIT);
+      this.fixWebGLContextScissorClear(ctx);
       ctx.enable(ctx.SCISSOR_TEST);
       ctx.scissor(0, 0, width, height);
     }
   }
 
+  /**
+   * Will monkey-patch the context to make sure that clear() calls will not
+   * take into account any scissor test previously set.
+   * @param {WebGLRenderingContext} gl WebGL Context
+   * @private
+   */
+  fixWebGLContextScissorClear(gl) {
+    if (gl._scissorClearFixed) {
+      return;
+    }
+    const clearFn = gl.clear;
+    gl.clear = function (...args) {
+      const scissorEnabled = gl.getParameter(gl.SCISSOR_TEST);
+      scissorEnabled && gl.disable(gl.SCISSOR_TEST);
+      clearFn.apply(gl, args);
+      scissorEnabled && gl.enable(gl.SCISSOR_TEST);
+    };
+    gl._scissorClearFixed = true;
+  }
+
   /**
    * @param {?Event|import('ol/events/Event').default} evt OpenLayers object event.
    * @private