mapbox/mapbox-gl-js

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

  1. Place a map inside the shadow DOM
  2. Apply CSS transform outside of the shadow root
  3. 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.