Collision boxes drift toward angled geometry despite text-offset

[1ec5]

maplibre-gl-js version: 3.0.0-pre.4 (but this issue has been reported since at least 2017)

browser: Firefox 109 on macOS

Steps to Trigger Behavior

1. Add two symbol layers to the style that each have a text-field and symbol-placement set to line.
2. Set the Y component of each layer’s text-offset to a different value to spread the layers apart.

Link to Demonstration

In this test case, there are two labels that say “Lorem ipsum dolor sit amet”. Each is rendered by a symbol layer that is identical except for a different text-offset. text-ignore-placement remains disabled:

https://jsbin.com/zuxuyap/edit?js,output

showCollisionBoxes is enabled: the blue circles are the collision boxes of the label that GL JS decided to show, while the red circles are the collision boxes of the label that GL JS decided to hide.

Expected Behavior

Both labels should be visible. The collision boxes should approximately align with the rendered glyphs.

Actual Behavior

The second layer’s label collides out the first layer’s label, even though there’s plenty of room to show both. Both labels’ collision boxes drift toward the angle in the geometry instead of staying consistently offset:

Impact

Typically, you’d style an international border by labeling a different country on either side of the border. This requires text-offset. However, this issue means that, on a sufficiently curved border, only one of the two labels will ever appear. For a practical example in a real, deployed style, see osm-americana/openstreetmap-americana#753 (comment).

Depending on the style, it may be possible to partially work around this issue by setting text-ignore-placement to true, disabling collision detection. However, the issue still reproduces, just less frequently. Moreover, in some styles, this may cause other layers’ labels to overlap, making them unreadable.

This issue was previously reported and confirmed in mapbox/mapbox-gl-js#4798 (comment).

[HarelM]

Isn't this basically the same as #2170?

[1ec5]

I figured it’s a different issue that happens to affect the same property. If you disable text-ignore-placement, #2170 still reproduces, but nothing gets collided anymore. Also, some of the issues linked from mapbox/mapbox-gl-js#4798 indicate that this issue also affects mouse events and icon-offset, which are unrelated to the glyph placement code. However, it’s possible that the fix would lie nearby.

[HarelM]

I see, thanks for the clarification.

[HarelM]

Fixed by #2260