Mouse events are shifted after a css transform scale on the map container

[nedasoo]

maplibre-gl-js version: 2.1.7

browser: Google Chrome 100.0.4896.60

Steps to Trigger Behavior

1.Create a map 2. Downscale the map container (Set transform:scale(0.8)) 3. Use map.resize() to update the canvas.

Link to Demonstration

Here is an example with a downscaled map (since the scale was set initially, no need for map.resize() ) https://jsfiddle.net/bjwtcqo6/

Expected Behavior

All mouse events should match the updated map.

Actual Behavior

All mouse events are shifted.

[DaveHeng]

solution:

.map {
    width: calc(100% * 0.8);
    height: calc(100% * 0.8);
    position: absolute;
    transform: translate(-50%, -50%) scale(calc(1 / 0.8));
    transform-origin: center center;
    top: 50%;
    left: 50%;
  }

[divlek]

We are facing the same issue when the parent container has a transform scale applied. Here is a jsfiddle showing the issue with the parent map container with transform:scale(1.5) applied. Mouse over on choropleth feature highlights a different feature with scale.

Wondering if any possible workaround (tried the suggestion above, didnt work) for this issue or any potential ETA for the bug fix? Appreciate any input. Thanks!

[thehoneymad]

@HarelM, @louwers this is a blocker for AWS to migrate a service to MapLibre. :) Any chance we can prioritize this?

[louwers]

@HarelM, @louwers this is a blocker for AWS to migrate a service to MapLibre. :) Any chance we can prioritize this?

@thehoneymad I am maintainer for Native, not JS. In general I can say that only fixing cricical bugs is within the responsibilities of us maintainers. And since we do not manage a team it is hard for us to prioritize anything aside from calling attention to it.

[IvanSanchez]

@thehoneymad Sounds like you might want to convince @HarelM to assign a bounty here.

[wipfli]

You are right @IvanSanchez that Bounties can be a good tool for fixing bug. However, we have to make sure that the work falls within one of the Bounty directions (https://github.com/maplibre/maplibre/issues?q=is%3Aissue+is%3Aopen+label%3A%22bounty+direction%22) which are approved by the MapLibre Governing Board. I am not sure if the ticket here is aligned with one of the Bounty directions, so at the moment we probably cannot assign a Bounty here.