Less declutter flicker by respecting renderBuffer

src/ol/render/canvas/Executor.js

@@ -69,8 +69,9 @@ class Executor {
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The replay can have overlapping geometries.
    * @param {SerializableInstructions} instructions The serializable instructions
+   * @param {number} renderBuffer Render buffer in pixels.
    */
-  constructor(resolution, pixelRatio, overlaps, instructions) {
+  constructor(resolution, pixelRatio, overlaps, instructions, renderBuffer) {
     /**
      * @protected
      * @type {boolean}
@@ -119,6 +120,8 @@ class Executor {
      */
     this.coordinateCache_ = {};
 
+    this.renderBuffer_ = renderBuffer;
+
     /**
      * @private
      * @type {!import("../../transform.js").Transform}
@@ -401,11 +404,14 @@ class Executor {
     const strokePadding = strokeInstruction
       ? (strokeInstruction[2] * scale) / 2
       : 0;
+    const renderBuffer = this.renderBuffer_;
     const intersects =
-      tmpExtent[0] - strokePadding <= canvas.width / contextScale &&
+      tmpExtent[0] - strokePadding <=
-      tmpExtent[2] + strokePadding >= 0 &&
+        (canvas.width + renderBuffer) / contextScale &&
-      tmpExtent[1] - strokePadding <= canvas.height / contextScale &&
+      tmpExtent[2] + strokePadding >= -renderBuffer / contextScale &&
-      tmpExtent[3] + strokePadding >= 0;
+      tmpExtent[1] - strokePadding <=
+        (canvas.height + renderBuffer) / contextScale &&
+      tmpExtent[3] + strokePadding >= -renderBuffer / contextScale;
 
     if (snapToPixel) {
       x = Math.round(x);

src/ol/render/canvas/ExecutorGroup.js

@@ -76,7 +76,7 @@ class ExecutorGroup {
      * @private
      * @type {number|undefined}
      */
-    this.renderBuffer_ = opt_renderBuffer;
+    this.renderBuffer_ = opt_renderBuffer || 0;
 
     /**
      * @private
@@ -132,7 +132,8 @@ class ExecutorGroup {
           this.resolution_,
           this.pixelRatio_,
           this.overlaps_,
-          instructions
+          instructions,
+          this.renderBuffer_
         );
       }
     }