diff --git a/src/ol/layer/WebGLTile.js b/src/ol/layer/WebGLTile.js
index c25caf417a..752f4ffab4 100644
--- a/src/ol/layer/WebGLTile.js
+++ b/src/ol/layer/WebGLTile.js
@@ -456,10 +456,13 @@ class WebGLTileLayer extends BaseTileLayer {
   /**
    * Update the layer style.  The `updateStyleVariables` function is a more efficient
    * way to update layer rendering.  In cases where the whole style needs to be updated,
-   * this method may be called instead.
+   * this method may be called instead.  Note that calling this method will also replace
+   * any previously set variables, so the new style also needs to include new variables,
+   * if needed.
    * @param {Style} style The new style.
    */
   setStyle(style) {
+    this.styleVariables_ = style.variables || {};
     this.style_ = style;
     const parsedStyle = parseStyle(this.style_, this.getSourceBandCount_());
     const renderer = this.getRenderer();
diff --git a/test/browser/spec/ol/layer/WebGLTile.test.js b/test/browser/spec/ol/layer/WebGLTile.test.js
index 6d6efa7d2d..5b5a8b81ea 100644
--- a/test/browser/spec/ol/layer/WebGLTile.test.js
+++ b/test/browser/spec/ol/layer/WebGLTile.test.js
@@ -255,6 +255,49 @@ describe('ol/layer/WebGLTile', function () {
       layer.updateStyleVariables({foo: 'bam'});
       expect(layer.styleVariables_.foo).to.be('bam');
     });
+
+    it('also works after setStyle()', function (done) {
+      const layer = new WebGLTileLayer({
+        className: 'testlayer2',
+        source: new DataTileSource({
+          loader(z, x, y) {
+            return new Promise((resolve) => {
+              resolve(new ImageData(256, 256));
+            });
+          },
+        }),
+      });
+
+      map.addLayer(layer);
+      layer.setStyle({
+        variables: {
+          r: 0,
+          g: 255,
+          b: 0,
+        },
+        color: ['color', ['var', 'r'], ['var', 'g'], ['var', 'b']],
+      });
+      map.renderSync();
+
+      layer.updateStyleVariables({
+        r: 255,
+        g: 0,
+        b: 255,
+      });
+
+      expect(layer.styleVariables_['r']).to.be(255);
+      const targetContext = createCanvasContext2D(100, 100);
+      layer.on('postrender', () => {
+        targetContext.clearRect(0, 0, 100, 100);
+        targetContext.drawImage(target.querySelector('.testlayer2'), 0, 0);
+      });
+      map.once('rendercomplete', () => {
+        expect(Array.from(targetContext.getImageData(0, 0, 1, 1).data)).to.eql([
+          255, 0, 255, 255,
+        ]);
+        done();
+      });
+    });
   });
 
   it('dispatches a precompose event with WebGL context', (done) => {