diff --git a/package-lock.json b/package-lock.json
index 78bc464952..b8a914f6bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "earcut": "^2.2.3",
         "geotiff": "2.0.4",
-        "ol-mapbox-style": "9.0.0",
+        "ol-mapbox-style": "9.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -7866,9 +7866,9 @@
       "dev": true
     },
     "node_modules/ol-mapbox-style": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.0.0.tgz",
-      "integrity": "sha512-smixniNq2N4nTLAYf8ouIcBI4dOd1P6p3CWd/cmuP6ai85s84vOGUVbCa1jcS40oDRlOakWRP3XqtEQhEv7Wbw==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz",
+      "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
         "mapbox-to-css-font": "^2.4.1"
@@ -16784,9 +16784,9 @@
       "dev": true
     },
     "ol-mapbox-style": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.0.0.tgz",
-      "integrity": "sha512-smixniNq2N4nTLAYf8ouIcBI4dOd1P6p3CWd/cmuP6ai85s84vOGUVbCa1jcS40oDRlOakWRP3XqtEQhEv7Wbw==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz",
+      "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==",
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
         "mapbox-to-css-font": "^2.4.1"
diff --git a/package.json b/package.json
index 0cb1f4fca6..f875470c9c 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
   "dependencies": {
     "earcut": "^2.2.3",
     "geotiff": "2.0.4",
-    "ol-mapbox-style": "9.0.0",
+    "ol-mapbox-style": "9.1.0",
     "pbf": "3.2.1",
     "rbush": "^3.0.1"
   },
diff --git a/test/browser/spec/ol/layer/MapboxVector.test.js b/test/browser/spec/ol/layer/MapboxVector.test.js
index 5c3cadfbff..eca5297cb4 100644
--- a/test/browser/spec/ol/layer/MapboxVector.test.js
+++ b/test/browser/spec/ol/layer/MapboxVector.test.js
@@ -1,5 +1,6 @@
+import Map from '../../../../../src/ol/Map.js';
 import MapboxVectorLayer from '../../../../../src/ol/layer/MapboxVector.js';
-import {asString} from '../../../../../src/ol/color.js';
+import View from '../../../../../src/ol/View.js';
 import {unByKey} from '../../../../../src/ol/Observable.js';
 
 describe('ol/layer/MapboxVector', () => {
@@ -90,6 +91,19 @@ describe('ol/layer/MapboxVector', () => {
   });
 
   describe('background', function () {
+    let map;
+    beforeEach(function () {
+      map = new Map({
+        target: createMapDiv(20, 20),
+        view: new View({
+          zoom: 2,
+          center: [0, 0],
+        }),
+      });
+    });
+    this.afterEach(function () {
+      disposeMap(map);
+    });
     it('configures the layer with a background function', function (done) {
       const layer = new MapboxVectorLayer({
         styleUrl:
@@ -116,13 +130,13 @@ describe('ol/layer/MapboxVector', () => {
             })
           ),
       });
-      const source = layer.getSource();
-      const key = source.on('change', function () {
-        if (source.getState() === 'ready') {
-          unByKey(key);
-          expect(layer.getBackground()(1)).to.eql(asString([255, 0, 0, 0.8]));
+      map.addLayer(layer);
+      layer.getSource().once('change', () => {
+        layer.once('prerender', (e) => {
+          const pixel = Array.from(e.context.getImageData(0, 0, 1, 1).data);
+          expect(pixel).to.eql([255, 0, 0, 0.8 * 255]);
           done();
-        }
+        });
       });
     });
 
@@ -153,13 +167,13 @@ describe('ol/layer/MapboxVector', () => {
           ),
         background: false,
       });
-      const source = layer.getSource();
-      const key = source.on('change', function () {
-        if (source.getState() === 'ready') {
-          unByKey(key);
-          expect(layer.getBackground()).to.be(false);
+      map.addLayer(layer);
+      layer.getSource().once('change', () => {
+        layer.once('prerender', (e) => {
+          const pixel = Array.from(e.context.getImageData(0, 0, 1, 1).data);
+          expect(pixel).to.eql([0, 0, 0, 0]);
           done();
-        }
+        });
       });
     });
 
@@ -191,13 +205,13 @@ describe('ol/layer/MapboxVector', () => {
             })
           ),
       });
-      const source = layer.getSource();
-      const key = source.on('change', function () {
-        if (source.getState() === 'ready') {
-          unByKey(key);
-          expect(layer.getBackground()).to.be(undefined);
+      map.addLayer(layer);
+      layer.getSource().once('change', () => {
+        layer.once('prerender', (e) => {
+          const pixel = Array.from(e.context.getImageData(0, 0, 1, 1).data);
+          expect(pixel).to.eql([0, 0, 0, 0]);
           done();
-        }
+        });
       });
     });
   });