Map dimensions are incorrect when shadow root is present
vitvakatu opened this issue · 0 comments
It seems _updateContainerDimensions
function is implemented in such a way that if the map is placed inside the Shadow DOM, and the scaling transformation is applied outside of shadow root, then calculated canvas size will be incorrect.
Reproduction:
https://jsbin.com/kuxaveliri/1/edit?html,output
Note that the dimensions of the map inside the #container
are halved because there is a scaling transform on the body
.
We found a hot fix for our case, that seems to be working correctly (it is also attached in the repro above):
map._updateContainerDimensions = function () {
if (!this._container) return
const width = this._container.offsetWidth || 400
const height = this._container.offsetHeight || 300
this._containerWidth = width
this._containerHeight = height
}
mapbox-gl-js version: 3.8.0
browser: Firefox 133.0, Chrome 131.0.6778.86
Steps to Trigger Behavior
- Place a map inside the shadow DOM
- Apply CSS transform outside of the shadow root
- Observe the map is scaled incorrectly, resulting in the doubled scaling factor.
Link to Demonstration
https://jsbin.com/kuxaveliri/1/edit?html,output
Expected Behavior
The map fully occupies the scaled #container
, no matter if the shadow DOM is used or not.
Actual Behavior
If the shadow DOM is present, the map is scaled incorrectly.