[Bug] Canvas size and positioning misaligned on Google Maps (raster type) with CSS transform
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 14.6k
- Forks
- 2.3k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 42
Description
Description
When the Google Maps container (or an ancestor element) is styled using CSS transform (e.g., transform: scale()), the GoogleMapsOverlay` canvas fails to calculate its dimensions and absolute DOM position correctly. As a result, the deck.gl canvas does not fully align with or cover the Google Map instance, leading to misaligned layers and unrendered/clipped data points.
Flavors
GoogleMapsOverlay
Expected Behavior
- The canvas element of deck.gl should fully cover Google Maps (both raster and vector types).
- Layers can be correctly rendered with no missing parts.
Steps to Reproduce
- Disable GPU acceleration in Chrome settings so that Google Maps falls back to raster type.
- Open https://developers.google.com/maps/documentation/javascript/examples/deckgl-tripslayer
- Open DevTools and modify
<body>withtransform: scale(0.5). - See the deck.gl canvas size and positioning are not aligned with Google Maps. Trip lines are no longer visible on some parts.
Environment
- Framework version: deck.gl 9.2.11 ~ 9.3.6
- Browser: Chrome 152, Edge 152
- OS: Windows, MacOS
Logs
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the GoogleMapsOverlay implementation and its canvas sizing and positioning logic. Reproduce the issue using the deck.gl trips-layer example with Chrome GPU acceleration disabled and a CSS transform on the body or map ancestor. Done means the canvas covers raster Google Maps and layers remain fully visible and aligned under the transform.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100