Description
When @deck.gl/mapbox's MapboxOverlay is added to a mapbox-gl map (non-interleaved mode), MapboxOverlay._onAddOverlaid() constructs the Deck instance before the control's own wrapper container has been given a real CSS size (_updateContainerSize() runs after new Deck(...)). The container also isn't attached to the document yet at that point (mapbox only inserts the control's returned element after onAdd() returns), so any size read via getBoundingClientRect() at that time is zero anyway.
Deck's _createCanvas() only sets canvas.width/canvas.height when props.width/props.height are typeof === 'number'. In this flow they're the default CSS string "100%", so that check never applies and the canvas keeps the browser's default drawing-buffer size (300×150). That buffer gets stretched via CSS to fill the real container size until luma.gl's internal ResizeObserver (its start is deferred until WebGL device initialization finishes) fires and corrects canvas.width/canvas.height — one or more frames later.
Net effect: everything rendered by deck.gl (points, icons, any pixel- or meter-sized layer) appears oversized and blurry for the first frame(s), then snaps to the correct size.
Flavors
No response
Expected Behavior
The canvas should be created at the correct drawing-buffer resolution (matching its real container size × devicePixelRatio) from the first rendered frame, with no visible size flash.
Steps to Reproduce
- Add a
MapboxOverlay (default, non-interleaved) to a mapbox-gl map via map.addControl(overlay), with at least one layer using pixel- or meter-based sizing (e.g. ScatterplotLayer).
- Load/reload the page.
- Log
canvas.width/canvas.height on each animation frame right after mount.
- Observe the first 1-2 frames report
300x150 (or whatever the browser's canvas default is) while displayed at full container size, before jumping to the correct value.
Environment
- @deck.gl/core: 9.3.9
- @deck.gl/mapbox: 9.3.9
- @deck.gl/react: 9.3.9
- mapbox-gl: 3.28.1
- @vis.gl/react-mapbox: 8.1.2
- Rendering mode:
MapboxOverlay, non-interleaved
- Browser: Chrome (desktop), macOS
Logs
No response
Description
When
@deck.gl/mapbox'sMapboxOverlayis added to a mapbox-gl map (non-interleaved mode),MapboxOverlay._onAddOverlaid()constructs theDeckinstance before the control's own wrapper container has been given a real CSS size (_updateContainerSize()runs afternew Deck(...)). The container also isn't attached to the document yet at that point (mapbox only inserts the control's returned element afteronAdd()returns), so any size read viagetBoundingClientRect()at that time is zero anyway.Deck's
_createCanvas()only setscanvas.width/canvas.heightwhenprops.width/props.heightaretypeof === 'number'. In this flow they're the default CSS string"100%", so that check never applies and the canvas keeps the browser's default drawing-buffer size (300×150). That buffer gets stretched via CSS to fill the real container size until luma.gl's internalResizeObserver(its start is deferred until WebGL device initialization finishes) fires and correctscanvas.width/canvas.height— one or more frames later.Net effect: everything rendered by deck.gl (points, icons, any pixel- or meter-sized layer) appears oversized and blurry for the first frame(s), then snaps to the correct size.
Flavors
No response
Expected Behavior
The canvas should be created at the correct drawing-buffer resolution (matching its real container size × devicePixelRatio) from the first rendered frame, with no visible size flash.
Steps to Reproduce
MapboxOverlay(default, non-interleaved) to a mapbox-gl map viamap.addControl(overlay), with at least one layer using pixel- or meter-based sizing (e.g.ScatterplotLayer).canvas.width/canvas.heighton each animation frame right after mount.300x150(or whatever the browser's canvas default is) while displayed at full container size, before jumping to the correct value.Environment
MapboxOverlay, non-interleavedLogs
No response