Marker centering cannot adapt to changing marker sizes

[peterqliu]

We currently center the marker DOM element on its pivot, by assessing its height and width and incorporating them into the CSS transform translations (I think it's this snippet of code).

This is great if the marker stays static, but if its size changes at all after instantiation (from content changes, hover interactions, etc), the element is still translated based on its original size, causing the element to go off-center from its pivot.

The solution I'm currently using (and am proposing for the Marker class) is to separate the translation and centering duties, by introducing a child element to tackle the latter. The proposed boilerplate looks like this:

<div class='marker mapboxgl-marker'>
  <div class='marker-centerer'>
    //user's marker content would go here
  </div>
</div>

If we style .marker-centerer with transform:translateX(-50%) translateY(-50%), it will automatically translate itself by a percentage of its own size, thereby making it adaptable to all future size changes.

[jfirebaugh]

I don't think we even need to add any wrappers. Just replacing the calculated 50% offset with transform: translate(-50%, -50%) should work; that's basically what Popup does.

[peterqliu]

edit: figured it out

@jfirebaugh to my knowledge, CSS transforms don't accept compound transforms of the same type, hence the wrapping. A quick experiment with the dev console seems to confirm