diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js
index beaa29dcaf..454b9b0ca8 100644
--- a/src/ol/renderer/canvas/VectorTileLayer.js
+++ b/src/ol/renderer/canvas/VectorTileLayer.js
@@ -138,8 +138,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.tmpTransform_ = createTransform();
 
-    // Use closest resolution.
-    this.zDirection = 0;
+    // Use nearest lower resolution.
+    this.zDirection = 1;
 
     listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
 
diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
index 44ae93f074..5bed2e1d78 100644
--- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
@@ -98,7 +98,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     it('creates a new instance', function() {
       const renderer = new CanvasVectorTileLayerRenderer(layer);
       expect(renderer).to.be.a(CanvasVectorTileLayerRenderer);
-      expect(renderer.zDirection).to.be(0);
+      expect(renderer.zDirection).to.be(1);
     });
 
     it('does not render replays for pure image rendering', function() {