diff --git a/examples/basemap-browser/src/config/build-config.ts b/examples/basemap-browser/src/config/build-config.ts
index f7bfe2ceadf..2eea9cdede1 100644
--- a/examples/basemap-browser/src/config/build-config.ts
+++ b/examples/basemap-browser/src/config/build-config.ts
@@ -24,7 +24,8 @@ export function buildConfig(
   dimensions: Dimensions,
   onViewStateChange?: ViewStateChangeCallback
 ): Config {
-  const {basemap, framework, interleaved, globe, multiView, maskDemo, stressTest} = dimensions;
+  const {basemap, framework, interleaved, globe, multiView, maskDemo, stressTest, useDevicePixels} =
+    dimensions;
 
   // Validate dimensions (warnings only)
   const validation = validateDimensions(dimensions);
@@ -58,6 +59,7 @@ export function buildConfig(
     multiView,
     maskDemo,
     stressTest,
+    useDevicePixels,
 
     // Computed configuration
     mapStyle,
diff --git a/examples/basemap-browser/src/config/dimensions.ts b/examples/basemap-browser/src/config/dimensions.ts
index 5cd3ac3efb5..6099c2c6aec 100644
--- a/examples/basemap-browser/src/config/dimensions.ts
+++ b/examples/basemap-browser/src/config/dimensions.ts
@@ -14,7 +14,8 @@ export const DEFAULT_DIMENSIONS: Dimensions = {
   globe: false,
   multiView: false,
   maskDemo: false,
-  stressTest: 'none'
+  stressTest: 'none',
+  useDevicePixels: true
 };
 
 /**
diff --git a/examples/basemap-browser/src/control-panel.tsx b/examples/basemap-browser/src/control-panel.tsx
index 9881e3a1254..c60372cbebc 100644
--- a/examples/basemap-browser/src/control-panel.tsx
+++ b/examples/basemap-browser/src/control-panel.tsx
@@ -68,6 +68,20 @@ function getDimensionsFromUrl(): Partial<Dimensions> {
     result.stressTest = stressTest;
   }
 
+  if (params.has('useDevicePixels')) {
+    const udp = params.get('useDevicePixels');
+    if (udp === 'true') {
+      result.useDevicePixels = true;
+    } else if (udp === 'false') {
+      result.useDevicePixels = false;
+    } else {
+      const num = Number(udp);
+      if (Number.isFinite(num) && num > 0) {
+        result.useDevicePixels = num;
+      }
+    }
+  }
+
   return result;
 }
 
@@ -81,6 +95,7 @@ function setUrlFromDimensions(dimensions: Dimensions) {
   params.set('multiView', String(dimensions.multiView));
   params.set('maskDemo', String(dimensions.maskDemo));
   params.set('stressTest', dimensions.stressTest);
+  params.set('useDevicePixels', String(dimensions.useDevicePixels));
   const newUrl = `${window.location.pathname}?${params.toString()}`;
   window.history.replaceState({}, '', newUrl);
 }
@@ -262,6 +277,20 @@ export default function ControlPanel({onConfigChange}: ControlPanelProps) {
           </label>
         </div>
 
+        {/* Pixel Ratio Override */}
+        <div className="section">
+          <label>
+            <input
+              type="checkbox"
+              checked={dimensions.useDevicePixels !== true}
+              onChange={() =>
+                updateDimension('useDevicePixels', dimensions.useDevicePixels === true ? 1.5 : true)
+              }
+            />
+            Override Pixel Ratio (1.5)
+          </label>
+        </div>
+
         {/* Stress Test Selection */}
         <div className="section">
           <div className="label">Stress Test:</div>
diff --git a/examples/basemap-browser/src/renderers/pure-js/deck-only.ts b/examples/basemap-browser/src/renderers/pure-js/deck-only.ts
index 04e11304a2c..16f3e80feb0 100644
--- a/examples/basemap-browser/src/renderers/pure-js/deck-only.ts
+++ b/examples/basemap-browser/src/renderers/pure-js/deck-only.ts
@@ -7,8 +7,16 @@ import type {Config} from '../../types';
 import {getBaseMapViewState} from '../../config';
 
 export function mount(container: HTMLElement, config: Config): () => void {
-  const {initialViewState, layers, multiView, views, layerFilter, globe, onViewStateChange} =
-    config;
+  const {
+    initialViewState,
+    layers,
+    multiView,
+    views,
+    layerFilter,
+    globe,
+    useDevicePixels,
+    onViewStateChange
+  } = config;
 
   // Create a wrapper div for Deck to render into
   const wrapper = document.createElement('div');
@@ -24,7 +32,8 @@ export function mount(container: HTMLElement, config: Config): () => void {
     height: '100%',
     initialViewState: viewState,
     controller: true,
-    layers
+    layers,
+    useDevicePixels
   };
 
   // Use GlobeView for globe projection
diff --git a/examples/basemap-browser/src/renderers/pure-js/google-maps.ts b/examples/basemap-browser/src/renderers/pure-js/google-maps.ts
index 32b44008083..54b21a60569 100644
--- a/examples/basemap-browser/src/renderers/pure-js/google-maps.ts
+++ b/examples/basemap-browser/src/renderers/pure-js/google-maps.ts
@@ -47,7 +47,7 @@ function loadGoogleMapsAPI(apiKey: string): Promise<any> {
 }
 
 export function mount(container: HTMLElement, config: Config): () => void {
-  const {initialViewState, layers, interleaved, onViewStateChange} = config;
+  const {initialViewState, layers, interleaved, useDevicePixels, onViewStateChange} = config;
   const viewState = getBaseMapViewState(initialViewState);
 
   // eslint-disable-next-line no-process-env
@@ -84,7 +84,8 @@ export function mount(container: HTMLElement, config: Config): () => void {
 
       overlay = new GoogleMapsOverlay({
         interleaved,
-        layers
+        layers,
+        useDevicePixels
       });
 
       overlay.setMap(map);
diff --git a/examples/basemap-browser/src/renderers/pure-js/mapbox.ts b/examples/basemap-browser/src/renderers/pure-js/mapbox.ts
index 62eff5e8e64..6912981df7d 100644
--- a/examples/basemap-browser/src/renderers/pure-js/mapbox.ts
+++ b/examples/basemap-browser/src/renderers/pure-js/mapbox.ts
@@ -17,6 +17,7 @@ export function mount(container: HTMLElement, config: Config): () => void {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
@@ -38,18 +39,25 @@ export function mount(container: HTMLElement, config: Config): () => void {
   // For multi-view, extract the mapbox view state for the base map
   const mapInitialViewState = getBaseMapViewState(initialViewState);
 
-  const map = new mapboxgl.Map({
+  const mapOpts: any = {
     container,
     style: mapStyle,
     center: [mapInitialViewState.longitude, mapInitialViewState.latitude],
     zoom: mapInitialViewState.zoom,
     bearing: mapInitialViewState.bearing || 0,
     pitch: mapInitialViewState.pitch || 0
-  });
+  };
+  if (typeof useDevicePixels === 'number') {
+    mapOpts.pixelRatio = useDevicePixels;
+  } else if (useDevicePixels === false) {
+    mapOpts.pixelRatio = 1;
+  }
+  const map = new mapboxgl.Map(mapOpts);
 
   const overlayConfig: any = {
     interleaved,
-    layers
+    layers,
+    useDevicePixels
   };
 
   if (multiView && views) {
diff --git a/examples/basemap-browser/src/renderers/pure-js/maplibre.ts b/examples/basemap-browser/src/renderers/pure-js/maplibre.ts
index c3229aab89e..7e26371cf53 100644
--- a/examples/basemap-browser/src/renderers/pure-js/maplibre.ts
+++ b/examples/basemap-browser/src/renderers/pure-js/maplibre.ts
@@ -17,24 +17,32 @@ export function mount(container: HTMLElement, config: Config): () => void {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
   // For multi-view, extract the mapbox view state for the base map
   const mapInitialViewState = getBaseMapViewState(initialViewState);
 
-  const map = new maplibregl.Map({
+  const mapOpts: maplibregl.MapOptions = {
     container,
     style: mapStyle,
     center: [mapInitialViewState.longitude, mapInitialViewState.latitude],
     zoom: mapInitialViewState.zoom,
     bearing: mapInitialViewState.bearing || 0,
     pitch: mapInitialViewState.pitch || 0
-  });
+  };
+  if (typeof useDevicePixels === 'number') {
+    mapOpts.pixelRatio = useDevicePixels;
+  } else if (useDevicePixels === false) {
+    mapOpts.pixelRatio = 1;
+  }
+  const map = new maplibregl.Map(mapOpts);
 
   const overlayConfig: any = {
     interleaved,
-    layers
+    layers,
+    useDevicePixels
   };
 
   if (multiView && views) {
diff --git a/examples/basemap-browser/src/renderers/react/deck-only-component.tsx b/examples/basemap-browser/src/renderers/react/deck-only-component.tsx
index 8d6ced90bd3..439f394148e 100644
--- a/examples/basemap-browser/src/renderers/react/deck-only-component.tsx
+++ b/examples/basemap-browser/src/renderers/react/deck-only-component.tsx
@@ -13,8 +13,16 @@ type DeckOnlyComponentProps = {
 };
 
 export default function DeckOnlyComponent({config}: DeckOnlyComponentProps) {
-  const {initialViewState, layers, multiView, views, layerFilter, globe, onViewStateChange} =
-    config;
+  const {
+    initialViewState,
+    layers,
+    multiView,
+    views,
+    layerFilter,
+    globe,
+    useDevicePixels,
+    onViewStateChange
+  } = config;
 
   const handleViewStateChange = useCallback(
     ({viewState: vs}: {viewState: any}) => {
@@ -63,6 +71,7 @@ export default function DeckOnlyComponent({config}: DeckOnlyComponentProps) {
         controller={true}
         layers={layers}
         views={effectiveViews}
+        useDevicePixels={useDevicePixels}
         layerFilter={multiView ? layerFilter : undefined}
         onViewStateChange={handleViewStateChange}
       />
diff --git a/examples/basemap-browser/src/renderers/react/google-maps-component.tsx b/examples/basemap-browser/src/renderers/react/google-maps-component.tsx
index 11338feb0fa..b0d7f4b385e 100644
--- a/examples/basemap-browser/src/renderers/react/google-maps-component.tsx
+++ b/examples/basemap-browser/src/renderers/react/google-maps-component.tsx
@@ -12,14 +12,19 @@ import {getBaseMapViewState} from '../../config';
 function GoogleMapsDeckOverlay({
   layers,
   interleaved,
+  useDevicePixels,
   onViewStateChange
 }: {
   layers: any[];
   interleaved: boolean;
+  useDevicePixels?: boolean | number;
   onViewStateChange?: (vs: InitialViewState) => void;
 }) {
   const map = useMap();
-  const overlay = useMemo(() => new GoogleMapsOverlay({interleaved}), [interleaved]);
+  const overlay = useMemo(
+    () => new GoogleMapsOverlay({interleaved, useDevicePixels}),
+    [interleaved, useDevicePixels]
+  );
 
   useEffect(() => {
     if (map) {
@@ -62,7 +67,7 @@ export default function GoogleMapsComponent({config}: GoogleMapsComponentProps)
   // eslint-disable-next-line no-process-env
   const mapId = process.env.GoogleMapsMapId || 'DEMO_MAP_ID';
 
-  const {initialViewState, layers, interleaved, onViewStateChange} = config;
+  const {initialViewState, layers, interleaved, useDevicePixels, onViewStateChange} = config;
   const viewState = getBaseMapViewState(initialViewState);
 
   return (
@@ -79,6 +84,7 @@ export default function GoogleMapsComponent({config}: GoogleMapsComponentProps)
           <GoogleMapsDeckOverlay
             layers={layers}
             interleaved={interleaved}
+            useDevicePixels={useDevicePixels}
             onViewStateChange={onViewStateChange}
           />
         </GoogleMap>
diff --git a/examples/basemap-browser/src/renderers/react/mapbox-component.tsx b/examples/basemap-browser/src/renderers/react/mapbox-component.tsx
index 322ac4ff8c5..560a08dfe9e 100644
--- a/examples/basemap-browser/src/renderers/react/mapbox-component.tsx
+++ b/examples/basemap-browser/src/renderers/react/mapbox-component.tsx
@@ -33,6 +33,7 @@ export default function MapboxComponent({config}: MapboxComponentProps) {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
@@ -42,10 +43,17 @@ export default function MapboxComponent({config}: MapboxComponentProps) {
   return (
     <div style={{width: '100%', height: '100%'}}>
       <MapboxMap
-        key={`mapbox-${interleaved}-${multiView}`}
+        key={`mapbox-${interleaved}-${multiView}-${useDevicePixels}`}
         mapStyle={mapStyle}
         mapboxAccessToken={MAPBOX_TOKEN}
         initialViewState={mapInitialViewState}
+        pixelRatio={
+          typeof useDevicePixels === 'number'
+            ? useDevicePixels
+            : useDevicePixels === false
+              ? 1
+              : undefined
+        }
         onMove={e => {
           onViewStateChange?.({
             latitude: e.viewState.latitude,
@@ -59,6 +67,7 @@ export default function MapboxComponent({config}: MapboxComponentProps) {
         <MapboxDeckOverlay
           layers={layers}
           interleaved={interleaved}
+          useDevicePixels={useDevicePixels}
           views={multiView ? views : undefined}
           layerFilter={multiView ? layerFilter : undefined}
           initialViewState={multiView ? initialViewState : undefined}
diff --git a/examples/basemap-browser/src/renderers/react/maplibre-component.tsx b/examples/basemap-browser/src/renderers/react/maplibre-component.tsx
index 63eed91d03b..5f3935fb8c7 100644
--- a/examples/basemap-browser/src/renderers/react/maplibre-component.tsx
+++ b/examples/basemap-browser/src/renderers/react/maplibre-component.tsx
@@ -30,6 +30,7 @@ export default function MapLibreComponent({config}: MapLibreComponentProps) {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
@@ -58,9 +59,16 @@ export default function MapLibreComponent({config}: MapLibreComponentProps) {
   return (
     <div style={{width: '100%', height: '100%'}}>
       <MapLibreMap
-        key={`maplibre-${interleaved}-${globe}-${multiView}`}
+        key={`maplibre-${interleaved}-${globe}-${multiView}-${useDevicePixels}`}
         mapStyle={mapStyle}
         initialViewState={mapInitialViewState}
+        pixelRatio={
+          typeof useDevicePixels === 'number'
+            ? useDevicePixels
+            : useDevicePixels === false
+              ? 1
+              : undefined
+        }
         onLoad={e => {
           if (globe && isMountedRef.current) {
             // Set projection before rendering overlay (critical for globe + interleaved mode)
@@ -90,6 +98,7 @@ export default function MapLibreComponent({config}: MapLibreComponentProps) {
           <MapLibreDeckOverlay
             layers={layers}
             interleaved={interleaved}
+            useDevicePixels={useDevicePixels}
             views={multiView ? views : undefined}
             layerFilter={multiView ? layerFilter : undefined}
             initialViewState={multiView ? initialViewState : undefined}
diff --git a/examples/basemap-browser/src/types.ts b/examples/basemap-browser/src/types.ts
index 2f3d90ee58a..d55437e5b6d 100644
--- a/examples/basemap-browser/src/types.ts
+++ b/examples/basemap-browser/src/types.ts
@@ -40,6 +40,7 @@ export type Dimensions = {
   multiView: boolean;
   maskDemo: boolean;
   stressTest: StressTest;
+  useDevicePixels: boolean | number;
 };
 
 // ===== Validation Types =====
@@ -69,6 +70,7 @@ export type Config = {
   multiView: boolean;
   maskDemo: boolean;
   stressTest: StressTest;
+  useDevicePixels: boolean | number;
 
   // Computed configuration
   mapStyle: string;
diff --git a/examples/basemap-browser/use-device-pixels-cdn-test-9.2.html b/examples/basemap-browser/use-device-pixels-cdn-test-9.2.html
new file mode 100644
index 00000000000..752a038802e
--- /dev/null
+++ b/examples/basemap-browser/use-device-pixels-cdn-test-9.2.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>useDevicePixels test (CDN - deck.gl 9.2)</title>
+  <script src="https://unpkg.com/deck.gl@9.2/dist.min.js"></script>
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <style>
+    body { font-family: monospace; margin: 20px; background: #1a1a2e; color: #eee; }
+    h2 span { font-size: 12px; background: #2196f3; color: white; padding: 2px 8px; border-radius: 4px; }
+    #controls { margin-bottom: 16px; }
+    .test-row { display: flex; gap: 24px; margin-bottom: 24px; }
+    .test-col { flex: 1; }
+    .test-col h3 { margin: 0 0 8px; }
+    .map { width: 100%; height: 300px; position: relative; border: 1px solid #444; }
+    .info { margin-top: 8px; line-height: 1.6; font-size: 12px; }
+    button { margin: 4px; padding: 6px 12px; cursor: pointer; }
+    button.active { background: #4caf50; color: white; }
+    .pass { color: #4caf50; } .fail { color: #f44336; }
+  </style>
+</head>
+<body>
+  <h2>useDevicePixels test <span>CDN deck.gl 9.2</span></h2>
+  <p>Side-by-side: standalone Deck vs MapboxOverlay interleaved. Uses published deck.gl 9.1 UMD bundle.</p>
+
+  <div id="controls">
+    <button id="btn-true" class="active" onclick="setUDP(true)">useDevicePixels: true</button>
+    <button id="btn-1.5" onclick="setUDP(1.5)">useDevicePixels: 1.5</button>
+    <button id="btn-1" onclick="setUDP(1)">useDevicePixels: 1</button>
+    <button id="btn-false" onclick="setUDP(false)">useDevicePixels: false</button>
+  </div>
+
+  <div class="test-row">
+    <div class="test-col">
+      <h3>Standalone Deck (internal device)</h3>
+      <div id="map-standalone" class="map"></div>
+      <div id="info-standalone" class="info">Loading...</div>
+    </div>
+    <div class="test-col">
+      <h3>MapboxOverlay interleaved (attached gl)</h3>
+      <div id="map-interleaved" class="map"></div>
+      <div id="info-interleaved" class="info">Loading...</div>
+    </div>
+  </div>
+
+  <script>
+    const {Deck, MapView} = globalThis.deck;
+    const {MapboxOverlay} = globalThis.deck;
+    const {ScatterplotLayer} = globalThis.deck;
+
+    const DATA = Array.from({length: 200}, (_, i) => ({
+      position: [-0.1 + Math.random() * 0.6, 51.3 + Math.random() * 0.3],
+      radius: 2000 + Math.random() * 5000
+    }));
+
+    function makeLayers() {
+      return [
+        new ScatterplotLayer({
+          id: 'scatter',
+          data: DATA,
+          getPosition: d => d.position,
+          getRadius: d => d.radius,
+          getFillColor: [255, 140, 0, 180],
+          stroked: true,
+          getLineColor: [255, 255, 255, 200],
+          lineWidthMinPixels: 1
+        })
+      ];
+    }
+
+    let currentUDP = true;
+
+    // --- Standalone Deck ---
+    const deck = new Deck({
+      parent: document.getElementById('map-standalone'),
+      width: '100%',
+      height: '100%',
+      initialViewState: { longitude: 0.1, latitude: 51.5, zoom: 7 },
+      controller: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    // --- Interleaved (MapLibre + MapboxOverlay) ---
+    const map = new maplibregl.Map({
+      container: 'map-interleaved',
+      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+      center: [0.1, 51.5],
+      zoom: 7
+    });
+
+    const overlay = new MapboxOverlay({
+      interleaved: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    map.on('load', () => {
+      map.addControl(overlay);
+    });
+
+    // --- Controls ---
+    window.setUDP = function(value) {
+      currentUDP = value;
+      deck.setProps({ useDevicePixels: value });
+      overlay.setProps({ useDevicePixels: value, layers: makeLayers() });
+      document.querySelectorAll('#controls button').forEach(b => b.classList.remove('active'));
+      document.getElementById(
+        value === true ? 'btn-true' : value === false ? 'btn-false' : 'btn-' + value
+      ).classList.add('active');
+      setTimeout(updateInfo, 300);
+    };
+
+    function getCanvasInfo(container) {
+      const canvas = container.querySelector('canvas');
+      if (!canvas) return null;
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      return {
+        cssW: canvas.clientWidth,
+        cssH: canvas.clientHeight,
+        bufW: gl ? gl.drawingBufferWidth : canvas.width,
+        bufH: gl ? gl.drawingBufferHeight : canvas.height
+      };
+    }
+
+    function renderInfo(elId, info) {
+      const el = document.getElementById(elId);
+      if (!info) { el.textContent = 'No canvas found'; return; }
+
+      const dpr = window.devicePixelRatio;
+      const actualRatio = (info.bufW / info.cssW).toFixed(3);
+
+      let expectedRatio;
+      if (currentUDP === true) expectedRatio = dpr;
+      else if (currentUDP === false) expectedRatio = 1;
+      else expectedRatio = currentUDP;
+
+      const tolerance = 0.05;
+      const match = Math.abs(actualRatio - expectedRatio) < tolerance;
+
+      el.innerHTML =
+        '<div><b>DPR:</b> ' + dpr + ' | <b>useDevicePixels:</b> ' + JSON.stringify(currentUDP) + '</div>' +
+        '<div><b>CSS:</b> ' + info.cssW + 'x' + info.cssH + ' | <b>Buffer:</b> ' + info.bufW + 'x' + info.bufH + '</div>' +
+        '<div><b>Actual ratio:</b> ' + actualRatio + ' | <b>Expected:</b> ' + expectedRatio.toFixed(3) + '</div>' +
+        '<div class="' + (match ? 'pass' : 'fail') + '"><b>' + (match ? 'PASS' : 'FAIL') + '</b> ' +
+        (match ? '' : '- buffer ratio does not match useDevicePixels setting') + '</div>';
+    }
+
+    function updateInfo() {
+      renderInfo('info-standalone', getCanvasInfo(document.getElementById('map-standalone')));
+      renderInfo('info-interleaved', getCanvasInfo(document.getElementById('map-interleaved')));
+    }
+
+    setInterval(updateInfo, 500);
+  </script>
+</body>
+</html>
diff --git a/examples/basemap-browser/use-device-pixels-cdn-test-9.3.html b/examples/basemap-browser/use-device-pixels-cdn-test-9.3.html
new file mode 100644
index 00000000000..400e9d4409d
--- /dev/null
+++ b/examples/basemap-browser/use-device-pixels-cdn-test-9.3.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>useDevicePixels test (CDN - deck.gl 9.3)</title>
+  <script src="https://unpkg.com/deck.gl@9.3/dist.min.js"></script>
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <style>
+    body { font-family: monospace; margin: 20px; background: #1a1a2e; color: #eee; }
+    h2 span { font-size: 12px; background: #2196f3; color: white; padding: 2px 8px; border-radius: 4px; }
+    #controls { margin-bottom: 16px; }
+    .test-row { display: flex; gap: 24px; margin-bottom: 24px; }
+    .test-col { flex: 1; }
+    .test-col h3 { margin: 0 0 8px; }
+    .map { width: 100%; height: 300px; position: relative; border: 1px solid #444; }
+    .info { margin-top: 8px; line-height: 1.6; font-size: 12px; }
+    button { margin: 4px; padding: 6px 12px; cursor: pointer; }
+    button.active { background: #4caf50; color: white; }
+    .pass { color: #4caf50; } .fail { color: #f44336; }
+  </style>
+</head>
+<body>
+  <h2>useDevicePixels test <span>CDN deck.gl 9.3</span></h2>
+  <p>Side-by-side: standalone Deck vs MapboxOverlay interleaved. Uses published deck.gl 9.1 UMD bundle.</p>
+
+  <div id="controls">
+    <button id="btn-true" class="active" onclick="setUDP(true)">useDevicePixels: true</button>
+    <button id="btn-1.5" onclick="setUDP(1.5)">useDevicePixels: 1.5</button>
+    <button id="btn-1" onclick="setUDP(1)">useDevicePixels: 1</button>
+    <button id="btn-false" onclick="setUDP(false)">useDevicePixels: false</button>
+  </div>
+
+  <div class="test-row">
+    <div class="test-col">
+      <h3>Standalone Deck (internal device)</h3>
+      <div id="map-standalone" class="map"></div>
+      <div id="info-standalone" class="info">Loading...</div>
+    </div>
+    <div class="test-col">
+      <h3>MapboxOverlay interleaved (attached gl)</h3>
+      <div id="map-interleaved" class="map"></div>
+      <div id="info-interleaved" class="info">Loading...</div>
+    </div>
+  </div>
+
+  <script>
+    const {Deck, MapView} = globalThis.deck;
+    const {MapboxOverlay} = globalThis.deck;
+    const {ScatterplotLayer} = globalThis.deck;
+
+    const DATA = Array.from({length: 200}, (_, i) => ({
+      position: [-0.1 + Math.random() * 0.6, 51.3 + Math.random() * 0.3],
+      radius: 2000 + Math.random() * 5000
+    }));
+
+    function makeLayers() {
+      return [
+        new ScatterplotLayer({
+          id: 'scatter',
+          data: DATA,
+          getPosition: d => d.position,
+          getRadius: d => d.radius,
+          getFillColor: [255, 140, 0, 180],
+          stroked: true,
+          getLineColor: [255, 255, 255, 200],
+          lineWidthMinPixels: 1
+        })
+      ];
+    }
+
+    let currentUDP = true;
+
+    // --- Standalone Deck ---
+    const deck = new Deck({
+      parent: document.getElementById('map-standalone'),
+      width: '100%',
+      height: '100%',
+      initialViewState: { longitude: 0.1, latitude: 51.5, zoom: 7 },
+      controller: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    // --- Interleaved (MapLibre + MapboxOverlay) ---
+    const map = new maplibregl.Map({
+      container: 'map-interleaved',
+      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+      center: [0.1, 51.5],
+      zoom: 7
+    });
+
+    const overlay = new MapboxOverlay({
+      interleaved: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    map.on('load', () => {
+      map.addControl(overlay);
+    });
+
+    // --- Controls ---
+    window.setUDP = function(value) {
+      currentUDP = value;
+      deck.setProps({ useDevicePixels: value });
+      overlay.setProps({ useDevicePixels: value, layers: makeLayers() });
+      document.querySelectorAll('#controls button').forEach(b => b.classList.remove('active'));
+      document.getElementById(
+        value === true ? 'btn-true' : value === false ? 'btn-false' : 'btn-' + value
+      ).classList.add('active');
+      setTimeout(updateInfo, 300);
+    };
+
+    function getCanvasInfo(container) {
+      const canvas = container.querySelector('canvas');
+      if (!canvas) return null;
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      return {
+        cssW: canvas.clientWidth,
+        cssH: canvas.clientHeight,
+        bufW: gl ? gl.drawingBufferWidth : canvas.width,
+        bufH: gl ? gl.drawingBufferHeight : canvas.height
+      };
+    }
+
+    function renderInfo(elId, info) {
+      const el = document.getElementById(elId);
+      if (!info) { el.textContent = 'No canvas found'; return; }
+
+      const dpr = window.devicePixelRatio;
+      const actualRatio = (info.bufW / info.cssW).toFixed(3);
+
+      let expectedRatio;
+      if (currentUDP === true) expectedRatio = dpr;
+      else if (currentUDP === false) expectedRatio = 1;
+      else expectedRatio = currentUDP;
+
+      const tolerance = 0.05;
+      const match = Math.abs(actualRatio - expectedRatio) < tolerance;
+
+      el.innerHTML =
+        '<div><b>DPR:</b> ' + dpr + ' | <b>useDevicePixels:</b> ' + JSON.stringify(currentUDP) + '</div>' +
+        '<div><b>CSS:</b> ' + info.cssW + 'x' + info.cssH + ' | <b>Buffer:</b> ' + info.bufW + 'x' + info.bufH + '</div>' +
+        '<div><b>Actual ratio:</b> ' + actualRatio + ' | <b>Expected:</b> ' + expectedRatio.toFixed(3) + '</div>' +
+        '<div class="' + (match ? 'pass' : 'fail') + '"><b>' + (match ? 'PASS' : 'FAIL') + '</b> ' +
+        (match ? '' : '- buffer ratio does not match useDevicePixels setting') + '</div>';
+    }
+
+    function updateInfo() {
+      renderInfo('info-standalone', getCanvasInfo(document.getElementById('map-standalone')));
+      renderInfo('info-interleaved', getCanvasInfo(document.getElementById('map-interleaved')));
+    }
+
+    setInterval(updateInfo, 500);
+  </script>
+</body>
+</html>
diff --git a/examples/basemap-browser/use-device-pixels-cdn-test.html b/examples/basemap-browser/use-device-pixels-cdn-test.html
new file mode 100644
index 00000000000..50cc9067401
--- /dev/null
+++ b/examples/basemap-browser/use-device-pixels-cdn-test.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>useDevicePixels test (CDN - deck.gl 9.1)</title>
+  <script src="https://unpkg.com/deck.gl@9.1/dist.min.js"></script>
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <style>
+    body { font-family: monospace; margin: 20px; background: #1a1a2e; color: #eee; }
+    h2 span { font-size: 12px; background: #2196f3; color: white; padding: 2px 8px; border-radius: 4px; }
+    #controls { margin-bottom: 16px; }
+    .test-row { display: flex; gap: 24px; margin-bottom: 24px; }
+    .test-col { flex: 1; }
+    .test-col h3 { margin: 0 0 8px; }
+    .map { width: 100%; height: 300px; position: relative; border: 1px solid #444; }
+    .info { margin-top: 8px; line-height: 1.6; font-size: 12px; }
+    button { margin: 4px; padding: 6px 12px; cursor: pointer; }
+    button.active { background: #4caf50; color: white; }
+    .pass { color: #4caf50; } .fail { color: #f44336; }
+  </style>
+</head>
+<body>
+  <h2>useDevicePixels test <span>CDN deck.gl 9.1</span></h2>
+  <p>Side-by-side: standalone Deck vs MapboxOverlay interleaved. Uses published deck.gl 9.1 UMD bundle.</p>
+
+  <div id="controls">
+    <button id="btn-true" class="active" onclick="setUDP(true)">useDevicePixels: true</button>
+    <button id="btn-1.5" onclick="setUDP(1.5)">useDevicePixels: 1.5</button>
+    <button id="btn-1" onclick="setUDP(1)">useDevicePixels: 1</button>
+    <button id="btn-false" onclick="setUDP(false)">useDevicePixels: false</button>
+  </div>
+
+  <div class="test-row">
+    <div class="test-col">
+      <h3>Standalone Deck (internal device)</h3>
+      <div id="map-standalone" class="map"></div>
+      <div id="info-standalone" class="info">Loading...</div>
+    </div>
+    <div class="test-col">
+      <h3>MapboxOverlay interleaved (attached gl)</h3>
+      <div id="map-interleaved" class="map"></div>
+      <div id="info-interleaved" class="info">Loading...</div>
+    </div>
+  </div>
+
+  <script>
+    const {Deck, MapView} = globalThis.deck;
+    const {MapboxOverlay} = globalThis.deck;
+    const {ScatterplotLayer} = globalThis.deck;
+
+    const DATA = Array.from({length: 200}, (_, i) => ({
+      position: [-0.1 + Math.random() * 0.6, 51.3 + Math.random() * 0.3],
+      radius: 2000 + Math.random() * 5000
+    }));
+
+    function makeLayers() {
+      return [
+        new ScatterplotLayer({
+          id: 'scatter',
+          data: DATA,
+          getPosition: d => d.position,
+          getRadius: d => d.radius,
+          getFillColor: [255, 140, 0, 180],
+          stroked: true,
+          getLineColor: [255, 255, 255, 200],
+          lineWidthMinPixels: 1
+        })
+      ];
+    }
+
+    let currentUDP = true;
+
+    // --- Standalone Deck ---
+    const deck = new Deck({
+      parent: document.getElementById('map-standalone'),
+      width: '100%',
+      height: '100%',
+      initialViewState: { longitude: 0.1, latitude: 51.5, zoom: 7 },
+      controller: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    // --- Interleaved (MapLibre + MapboxOverlay) ---
+    const map = new maplibregl.Map({
+      container: 'map-interleaved',
+      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+      center: [0.1, 51.5],
+      zoom: 7
+    });
+
+    const overlay = new MapboxOverlay({
+      interleaved: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    map.on('load', () => {
+      map.addControl(overlay);
+    });
+
+    // --- Controls ---
+    window.setUDP = function(value) {
+      currentUDP = value;
+      deck.setProps({ useDevicePixels: value });
+      overlay.setProps({ useDevicePixels: value, layers: makeLayers() });
+      document.querySelectorAll('#controls button').forEach(b => b.classList.remove('active'));
+      document.getElementById(
+        value === true ? 'btn-true' : value === false ? 'btn-false' : 'btn-' + value
+      ).classList.add('active');
+      setTimeout(updateInfo, 300);
+    };
+
+    function getCanvasInfo(container) {
+      const canvas = container.querySelector('canvas');
+      if (!canvas) return null;
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      return {
+        cssW: canvas.clientWidth,
+        cssH: canvas.clientHeight,
+        bufW: gl ? gl.drawingBufferWidth : canvas.width,
+        bufH: gl ? gl.drawingBufferHeight : canvas.height
+      };
+    }
+
+    function renderInfo(elId, info) {
+      const el = document.getElementById(elId);
+      if (!info) { el.textContent = 'No canvas found'; return; }
+
+      const dpr = window.devicePixelRatio;
+      const actualRatio = (info.bufW / info.cssW).toFixed(3);
+
+      let expectedRatio;
+      if (currentUDP === true) expectedRatio = dpr;
+      else if (currentUDP === false) expectedRatio = 1;
+      else expectedRatio = currentUDP;
+
+      const tolerance = 0.05;
+      const match = Math.abs(actualRatio - expectedRatio) < tolerance;
+
+      el.innerHTML =
+        '<div><b>DPR:</b> ' + dpr + ' | <b>useDevicePixels:</b> ' + JSON.stringify(currentUDP) + '</div>' +
+        '<div><b>CSS:</b> ' + info.cssW + 'x' + info.cssH + ' | <b>Buffer:</b> ' + info.bufW + 'x' + info.bufH + '</div>' +
+        '<div><b>Actual ratio:</b> ' + actualRatio + ' | <b>Expected:</b> ' + expectedRatio.toFixed(3) + '</div>' +
+        '<div class="' + (match ? 'pass' : 'fail') + '"><b>' + (match ? 'PASS' : 'FAIL') + '</b> ' +
+        (match ? '' : '- buffer ratio does not match useDevicePixels setting') + '</div>';
+    }
+
+    function updateInfo() {
+      renderInfo('info-standalone', getCanvasInfo(document.getElementById('map-standalone')));
+      renderInfo('info-interleaved', getCanvasInfo(document.getElementById('map-interleaved')));
+    }
+
+    setInterval(updateInfo, 500);
+  </script>
+</body>
+</html>
diff --git a/examples/basemap-browser/use-device-pixels-local-test.html b/examples/basemap-browser/use-device-pixels-local-test.html
new file mode 100644
index 00000000000..13a969baef9
--- /dev/null
+++ b/examples/basemap-browser/use-device-pixels-local-test.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>useDevicePixels test (LOCAL build)</title>
+  <style>
+    body { font-family: monospace; margin: 20px; background: #1a1a2e; color: #eee; }
+    h2 span { font-size: 12px; background: #ff9800; color: black; padding: 2px 8px; border-radius: 4px; }
+    #controls { margin-bottom: 16px; }
+    .test-row { display: flex; gap: 24px; margin-bottom: 24px; }
+    .test-col { flex: 1; }
+    .test-col h3 { margin: 0 0 8px; }
+    .map { width: 100%; height: 300px; position: relative; border: 1px solid #444; }
+    .info { margin-top: 8px; line-height: 1.6; font-size: 12px; }
+    button { margin: 4px; padding: 6px 12px; cursor: pointer; }
+    button.active { background: #4caf50; color: white; }
+    .pass { color: #4caf50; } .fail { color: #f44336; }
+  </style>
+</head>
+<body>
+  <h2>useDevicePixels test <span>LOCAL BUILD</span></h2>
+  <p>Side-by-side comparison: standalone Deck (useDevicePixels) vs MapboxOverlay interleaved (MapLibre pixelRatio + useDevicePixels).<br>
+  Interleaved mode recreates the map with the appropriate pixelRatio.</p>
+
+  <div id="controls">
+    <button id="btn-true" onclick="setUDP(true)">useDevicePixels: true</button>
+    <button id="btn-1.5" onclick="setUDP(1.5)">useDevicePixels: 1.5</button>
+    <button id="btn-1" onclick="setUDP(1)">useDevicePixels: 1</button>
+    <button id="btn-false" onclick="setUDP(false)">useDevicePixels: false</button>
+  </div>
+
+  <div class="test-row">
+    <div class="test-col">
+      <h3>Standalone Deck (internal device)</h3>
+      <div id="map-standalone" class="map"></div>
+      <div id="info-standalone" class="info">Loading...</div>
+    </div>
+    <div class="test-col">
+      <h3>MapboxOverlay interleaved (attached gl)</h3>
+      <div id="map-interleaved" class="map"></div>
+      <div id="info-interleaved" class="info">Loading...</div>
+    </div>
+  </div>
+
+  <script type="module">
+    import {Deck} from '@deck.gl/core';
+    import {MapboxOverlay} from '@deck.gl/mapbox';
+    import {ScatterplotLayer} from '@deck.gl/layers';
+    import maplibregl from 'maplibre-gl';
+    import 'maplibre-gl/dist/maplibre-gl.css';
+
+    const DATA = Array.from({length: 200}, (_, i) => ({
+      position: [-0.1 + Math.random() * 0.6, 51.3 + Math.random() * 0.3],
+      radius: 2000 + Math.random() * 5000
+    }));
+
+    function makeLayers() {
+      return [
+        new ScatterplotLayer({
+          id: 'scatter',
+          data: DATA,
+          getPosition: d => d.position,
+          getRadius: d => d.radius,
+          getFillColor: [255, 140, 0, 180],
+          stroked: true,
+          getLineColor: [255, 255, 255, 200],
+          lineWidthMinPixels: 1
+        })
+      ];
+    }
+
+    let currentUDP = true;
+
+    // --- Standalone Deck ---
+    const deck = new Deck({
+      parent: document.getElementById('map-standalone'),
+      width: '100%',
+      height: '100%',
+      initialViewState: { longitude: 0.1, latitude: 51.5, zoom: 7 },
+      controller: true,
+      useDevicePixels: currentUDP,
+      layers: makeLayers()
+    });
+
+    // --- Interleaved (MapLibre + MapboxOverlay) ---
+    let map = null;
+    let overlay = null;
+
+    function createInterleavedMap(udpValue) {
+      const container = document.getElementById('map-interleaved');
+      if (map) {
+        map.remove();
+        container.innerHTML = '';
+      }
+
+      const mapOpts = {
+        container: container,
+        style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+        center: [0.1, 51.5],
+        zoom: 7
+      };
+      if (typeof udpValue === 'number') {
+        mapOpts.pixelRatio = udpValue;
+      } else if (udpValue === false) {
+        mapOpts.pixelRatio = 1;
+      }
+
+      map = new maplibregl.Map(mapOpts);
+
+      overlay = new MapboxOverlay({
+        interleaved: true,
+        useDevicePixels: udpValue,
+        layers: makeLayers()
+      });
+
+      map.on('load', () => {
+        map.addControl(overlay);
+        setTimeout(updateInfo, 300);
+      });
+    }
+
+    createInterleavedMap(currentUDP);
+
+    // --- Controls ---
+    window.setUDP = function(value) {
+      currentUDP = value;
+      deck.setProps({ useDevicePixels: value });
+      createInterleavedMap(value);
+      document.querySelectorAll('#controls button').forEach(b => b.classList.remove('active'));
+      document.getElementById(
+        value === true ? 'btn-true' : value === false ? 'btn-false' : `btn-${value}`
+      )?.classList.add('active');
+      setTimeout(updateInfo, 500);
+    };
+
+    function getCanvasInfo(container) {
+      const canvas = container.querySelector('canvas');
+      if (!canvas) return null;
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      return {
+        cssW: canvas.clientWidth,
+        cssH: canvas.clientHeight,
+        bufW: gl ? gl.drawingBufferWidth : canvas.width,
+        bufH: gl ? gl.drawingBufferHeight : canvas.height
+      };
+    }
+
+    function renderInfo(elId, info) {
+      const el = document.getElementById(elId);
+      if (!info) { el.textContent = 'No canvas found'; return; }
+
+      const dpr = window.devicePixelRatio;
+      const actualRatio = (info.bufW / info.cssW).toFixed(3);
+
+      let expectedRatio;
+      if (currentUDP === true) expectedRatio = dpr;
+      else if (currentUDP === false) expectedRatio = 1;
+      else expectedRatio = currentUDP;
+
+      const tolerance = 0.05;
+      const match = Math.abs(actualRatio - expectedRatio) < tolerance;
+
+      el.innerHTML = `
+        <div><b>DPR:</b> ${dpr} | <b>useDevicePixels:</b> ${JSON.stringify(currentUDP)}</div>
+        <div><b>CSS:</b> ${info.cssW}x${info.cssH} | <b>Buffer:</b> ${info.bufW}x${info.bufH}</div>
+        <div><b>Actual ratio:</b> ${actualRatio} | <b>Expected:</b> ${expectedRatio.toFixed(3)}</div>
+        <div class="${match ? 'pass' : 'fail'}"><b>${match ? 'PASS' : 'FAIL'}</b> ${match ? '' : '- buffer ratio does not match useDevicePixels setting'}</div>
+      `;
+    }
+
+    function updateInfo() {
+      renderInfo('info-standalone', getCanvasInfo(document.getElementById('map-standalone')));
+      renderInfo('info-interleaved', getCanvasInfo(document.getElementById('map-interleaved')));
+    }
+
+    setInterval(updateInfo, 500);
+    document.getElementById('btn-true').classList.add('active');
+  </script>
+</body>
+</html>
diff --git a/examples/basemap-browser/use-device-pixels-maplibre-ratio-test-9.3.html b/examples/basemap-browser/use-device-pixels-maplibre-ratio-test-9.3.html
new file mode 100644
index 00000000000..e4a754504be
--- /dev/null
+++ b/examples/basemap-browser/use-device-pixels-maplibre-ratio-test-9.3.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>useDevicePixels test - MapLibre pixelRatio vs Deck useDevicePixels</title>
+  <script src="https://unpkg.com/deck.gl@9.3/dist.min.js"></script>
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <style>
+    body { font-family: monospace; margin: 20px; background: #1a1a2e; color: #eee; }
+    h2 span { font-size: 12px; background: #2196f3; color: white; padding: 2px 8px; border-radius: 4px; }
+    #controls { margin-bottom: 16px; }
+    .test-row { display: flex; gap: 24px; margin-bottom: 24px; }
+    .test-col { flex: 1; }
+    .test-col h3 { margin: 0 0 8px; font-size: 14px; }
+    .map { width: 100%; height: 300px; position: relative; border: 1px solid #444; }
+    .info { margin-top: 8px; line-height: 1.6; font-size: 12px; }
+    button { margin: 4px; padding: 6px 12px; cursor: pointer; }
+    button.active { background: #4caf50; color: white; }
+    .pass { color: #4caf50; } .fail { color: #f44336; }
+    .section-label { color: #aaa; margin-bottom: 4px; font-size: 11px; }
+  </style>
+</head>
+<body>
+  <h2>MapLibre pixelRatio vs Deck useDevicePixels <span>deck.gl 9.3</span></h2>
+  <p>Left: MapLibre's <code>pixelRatio</code> controls the canvas buffer. Right: Deck's <code>useDevicePixels</code> on standalone.<br>
+  This tests whether the interleaved buffer is controlled by MapLibre's pixelRatio (not Deck's useDevicePixels).</p>
+
+  <div id="controls">
+    <button id="btn-native" class="active" onclick="setRatio('native')">Native DPR</button>
+    <button id="btn-1.5" onclick="setRatio(1.5)">Ratio: 1.5</button>
+    <button id="btn-1" onclick="setRatio(1)">Ratio: 1</button>
+    <button id="btn-0.5" onclick="setRatio(0.5)">Ratio: 0.5</button>
+  </div>
+
+  <div class="test-row">
+    <div class="test-col">
+      <h3>MapboxOverlay interleaved<br><span class="section-label">Uses MapLibre pixelRatio (recreates map)</span></h3>
+      <div id="map-interleaved" class="map"></div>
+      <div id="info-interleaved" class="info">Loading...</div>
+    </div>
+    <div class="test-col">
+      <h3>Standalone Deck<br><span class="section-label">Uses Deck useDevicePixels</span></h3>
+      <div id="map-standalone" class="map"></div>
+      <div id="info-standalone" class="info">Loading...</div>
+    </div>
+  </div>
+
+  <script>
+    const {Deck} = globalThis.deck;
+    const {MapboxOverlay} = globalThis.deck;
+    const {ScatterplotLayer} = globalThis.deck;
+
+    const DATA = Array.from({length: 200}, (_, i) => ({
+      position: [-0.1 + Math.random() * 0.6, 51.3 + Math.random() * 0.3],
+      radius: 2000 + Math.random() * 5000
+    }));
+
+    function makeLayers() {
+      return [
+        new ScatterplotLayer({
+          id: 'scatter',
+          data: DATA,
+          getPosition: d => d.position,
+          getRadius: d => d.radius,
+          getFillColor: [255, 140, 0, 180],
+          stroked: true,
+          getLineColor: [255, 255, 255, 200],
+          lineWidthMinPixels: 1
+        })
+      ];
+    }
+
+    let currentRatio = 'native';
+
+    // --- Standalone Deck ---
+    const deck = new Deck({
+      parent: document.getElementById('map-standalone'),
+      width: '100%',
+      height: '100%',
+      initialViewState: { longitude: 0.1, latitude: 51.5, zoom: 7 },
+      controller: true,
+      useDevicePixels: true,
+      layers: makeLayers()
+    });
+
+    // --- Interleaved (MapLibre + MapboxOverlay) ---
+    let map = null;
+    let overlay = null;
+
+    function createInterleavedMap(pixelRatio) {
+      const container = document.getElementById('map-interleaved');
+      if (map) {
+        map.remove();
+        container.innerHTML = '';
+      }
+
+      const mapOpts = {
+        container: container,
+        style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+        center: [0.1, 51.5],
+        zoom: 7
+      };
+
+      if (pixelRatio !== 'native') {
+        mapOpts.pixelRatio = pixelRatio;
+      }
+
+      map = new maplibregl.Map(mapOpts);
+
+      overlay = new MapboxOverlay({
+        interleaved: true,
+        layers: makeLayers()
+      });
+
+      map.on('load', () => {
+        map.addControl(overlay);
+        setTimeout(updateInfo, 300);
+      });
+    }
+
+    createInterleavedMap('native');
+
+    // --- Controls ---
+    window.setRatio = function(value) {
+      currentRatio = value;
+
+      // Standalone Deck: use useDevicePixels
+      const udp = value === 'native' ? true : value;
+      deck.setProps({ useDevicePixels: udp });
+
+      // Interleaved: recreate map with MapLibre's pixelRatio
+      createInterleavedMap(value);
+
+      document.querySelectorAll('#controls button').forEach(b => b.classList.remove('active'));
+      document.getElementById(
+        value === 'native' ? 'btn-native' : 'btn-' + value
+      ).classList.add('active');
+      setTimeout(updateInfo, 500);
+    };
+
+    function getCanvasInfo(container) {
+      const canvas = container.querySelector('canvas');
+      if (!canvas) return null;
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      return {
+        cssW: canvas.clientWidth,
+        cssH: canvas.clientHeight,
+        bufW: gl ? gl.drawingBufferWidth : canvas.width,
+        bufH: gl ? gl.drawingBufferHeight : canvas.height
+      };
+    }
+
+    function renderInfo(elId, info, expectedRatio) {
+      const el = document.getElementById(elId);
+      if (!info) { el.textContent = 'No canvas found'; return; }
+
+      const dpr = window.devicePixelRatio;
+      const actualRatio = (info.bufW / info.cssW).toFixed(3);
+
+      const tolerance = 0.05;
+      const match = Math.abs(actualRatio - expectedRatio) < tolerance;
+
+      el.innerHTML =
+        '<div><b>DPR:</b> ' + dpr + ' | <b>Requested ratio:</b> ' + (currentRatio === 'native' ? 'native (' + dpr + ')' : currentRatio) + '</div>' +
+        '<div><b>CSS:</b> ' + info.cssW + 'x' + info.cssH + ' | <b>Buffer:</b> ' + info.bufW + 'x' + info.bufH + '</div>' +
+        '<div><b>Actual ratio:</b> ' + actualRatio + ' | <b>Expected:</b> ' + expectedRatio.toFixed(3) + '</div>' +
+        '<div class="' + (match ? 'pass' : 'fail') + '"><b>' + (match ? 'PASS' : 'FAIL') + '</b> ' +
+        (match ? '' : '- buffer ratio does not match requested setting') + '</div>';
+    }
+
+    function updateInfo() {
+      const dpr = window.devicePixelRatio;
+      const expectedRatio = currentRatio === 'native' ? dpr : currentRatio;
+      renderInfo('info-standalone', getCanvasInfo(document.getElementById('map-standalone')), expectedRatio);
+      renderInfo('info-interleaved', getCanvasInfo(document.getElementById('map-interleaved')), expectedRatio);
+    }
+
+    setInterval(updateInfo, 500);
+  </script>
+</body>
+</html>
diff --git a/examples/basemap-browser/use-device-pixels-maplibre-ratio-test.html b/examples/basemap-browser/use-device-pixels-maplibre-ratio-test.html
new file mode 100644
index 00000000000..66ca5520c35
--- /dev/null
+++ b/examples/basemap-browser/use-device-pixels-maplibre-ratio-test.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>useDevicePixels test - MapLibre pixelRatio vs Deck useDevicePixels</title>
+  <script src="https://unpkg.com/deck.gl@9.1/dist.min.js"></script>
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <style>
+    body { font-family: monospace; margin: 20px; background: #1a1a2e; color: #eee; }
+    h2 span { font-size: 12px; background: #2196f3; color: white; padding: 2px 8px; border-radius: 4px; }
+    #controls { margin-bottom: 16px; }
+    .test-row { display: flex; gap: 24px; margin-bottom: 24px; }
+    .test-col { flex: 1; }
+    .test-col h3 { margin: 0 0 8px; font-size: 14px; }
+    .map { width: 100%; height: 300px; position: relative; border: 1px solid #444; }
+    .info { margin-top: 8px; line-height: 1.6; font-size: 12px; }
+    button { margin: 4px; padding: 6px 12px; cursor: pointer; }
+    button.active { background: #4caf50; color: white; }
+    .pass { color: #4caf50; } .fail { color: #f44336; }
+    .section-label { color: #aaa; margin-bottom: 4px; font-size: 11px; }
+  </style>
+</head>
+<body>
+  <h2>MapLibre pixelRatio vs Deck useDevicePixels <span>deck.gl 9.1</span></h2>
+  <p>Left: MapLibre's <code>pixelRatio</code> controls the canvas buffer. Right: Deck's <code>useDevicePixels</code> on standalone.<br>
+  This tests whether the interleaved buffer is controlled by MapLibre's pixelRatio (not Deck's useDevicePixels).</p>
+
+  <div id="controls">
+    <button id="btn-native" class="active" onclick="setRatio('native')">Native DPR</button>
+    <button id="btn-1.5" onclick="setRatio(1.5)">Ratio: 1.5</button>
+    <button id="btn-1" onclick="setRatio(1)">Ratio: 1</button>
+    <button id="btn-0.5" onclick="setRatio(0.5)">Ratio: 0.5</button>
+  </div>
+
+  <div class="test-row">
+    <div class="test-col">
+      <h3>MapboxOverlay interleaved<br><span class="section-label">Uses MapLibre pixelRatio (recreates map)</span></h3>
+      <div id="map-interleaved" class="map"></div>
+      <div id="info-interleaved" class="info">Loading...</div>
+    </div>
+    <div class="test-col">
+      <h3>Standalone Deck<br><span class="section-label">Uses Deck useDevicePixels</span></h3>
+      <div id="map-standalone" class="map"></div>
+      <div id="info-standalone" class="info">Loading...</div>
+    </div>
+  </div>
+
+  <script>
+    const {Deck} = globalThis.deck;
+    const {MapboxOverlay} = globalThis.deck;
+    const {ScatterplotLayer} = globalThis.deck;
+
+    const DATA = Array.from({length: 200}, (_, i) => ({
+      position: [-0.1 + Math.random() * 0.6, 51.3 + Math.random() * 0.3],
+      radius: 2000 + Math.random() * 5000
+    }));
+
+    function makeLayers() {
+      return [
+        new ScatterplotLayer({
+          id: 'scatter',
+          data: DATA,
+          getPosition: d => d.position,
+          getRadius: d => d.radius,
+          getFillColor: [255, 140, 0, 180],
+          stroked: true,
+          getLineColor: [255, 255, 255, 200],
+          lineWidthMinPixels: 1
+        })
+      ];
+    }
+
+    let currentRatio = 'native';
+
+    // --- Standalone Deck ---
+    const deck = new Deck({
+      parent: document.getElementById('map-standalone'),
+      width: '100%',
+      height: '100%',
+      initialViewState: { longitude: 0.1, latitude: 51.5, zoom: 7 },
+      controller: true,
+      useDevicePixels: true,
+      layers: makeLayers()
+    });
+
+    // --- Interleaved (MapLibre + MapboxOverlay) ---
+    let map = null;
+    let overlay = null;
+
+    function createInterleavedMap(pixelRatio) {
+      const container = document.getElementById('map-interleaved');
+      if (map) {
+        map.remove();
+        container.innerHTML = '';
+      }
+
+      const mapOpts = {
+        container: container,
+        style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+        center: [0.1, 51.5],
+        zoom: 7
+      };
+
+      if (pixelRatio !== 'native') {
+        mapOpts.pixelRatio = pixelRatio;
+      }
+
+      map = new maplibregl.Map(mapOpts);
+
+      overlay = new MapboxOverlay({
+        interleaved: true,
+        layers: makeLayers()
+      });
+
+      map.on('load', () => {
+        map.addControl(overlay);
+        setTimeout(updateInfo, 300);
+      });
+    }
+
+    createInterleavedMap('native');
+
+    // --- Controls ---
+    window.setRatio = function(value) {
+      currentRatio = value;
+
+      // Standalone Deck: use useDevicePixels
+      const udp = value === 'native' ? true : value;
+      deck.setProps({ useDevicePixels: udp });
+
+      // Interleaved: recreate map with MapLibre's pixelRatio
+      createInterleavedMap(value);
+
+      document.querySelectorAll('#controls button').forEach(b => b.classList.remove('active'));
+      document.getElementById(
+        value === 'native' ? 'btn-native' : 'btn-' + value
+      ).classList.add('active');
+      setTimeout(updateInfo, 500);
+    };
+
+    function getCanvasInfo(container) {
+      const canvas = container.querySelector('canvas');
+      if (!canvas) return null;
+      const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+      return {
+        cssW: canvas.clientWidth,
+        cssH: canvas.clientHeight,
+        bufW: gl ? gl.drawingBufferWidth : canvas.width,
+        bufH: gl ? gl.drawingBufferHeight : canvas.height
+      };
+    }
+
+    function renderInfo(elId, info, expectedRatio) {
+      const el = document.getElementById(elId);
+      if (!info) { el.textContent = 'No canvas found'; return; }
+
+      const dpr = window.devicePixelRatio;
+      const actualRatio = (info.bufW / info.cssW).toFixed(3);
+
+      const tolerance = 0.05;
+      const match = Math.abs(actualRatio - expectedRatio) < tolerance;
+
+      el.innerHTML =
+        '<div><b>DPR:</b> ' + dpr + ' | <b>Requested ratio:</b> ' + (currentRatio === 'native' ? 'native (' + dpr + ')' : currentRatio) + '</div>' +
+        '<div><b>CSS:</b> ' + info.cssW + 'x' + info.cssH + ' | <b>Buffer:</b> ' + info.bufW + 'x' + info.bufH + '</div>' +
+        '<div><b>Actual ratio:</b> ' + actualRatio + ' | <b>Expected:</b> ' + expectedRatio.toFixed(3) + '</div>' +
+        '<div class="' + (match ? 'pass' : 'fail') + '"><b>' + (match ? 'PASS' : 'FAIL') + '</b> ' +
+        (match ? '' : '- buffer ratio does not match requested setting') + '</div>';
+    }
+
+    function updateInfo() {
+      const dpr = window.devicePixelRatio;
+      const expectedRatio = currentRatio === 'native' ? dpr : currentRatio;
+      renderInfo('info-standalone', getCanvasInfo(document.getElementById('map-standalone')), expectedRatio);
+      renderInfo('info-interleaved', getCanvasInfo(document.getElementById('map-interleaved')), expectedRatio);
+    }
+
+    setInterval(updateInfo, 500);
+  </script>
+</body>
+</html>