Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map dimensions are incorrect when shadow root is present #13355

Open
vitvakatu opened this issue Dec 17, 2024 · 0 comments
Open

Map dimensions are incorrect when shadow root is present #13355

vitvakatu opened this issue Dec 17, 2024 · 0 comments

Comments

@vitvakatu
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant