[Bug] CollisionFilter breaking TextLayer depending on text content

[beasteers]

Description

Certain text values will cause the collision filter to hide text labels even when no other colliding labels exist in proximity.

This can be seen specifically with decimal placement (though there could be other cases).

When you have a number where the decimal place is centered 5.2 or 15.25, the labels will disappear completely. If you have a slightly off center label 25.1, they will get very faded and will flicker a lot on zoom.

There could be other font issues as well. A couple weeks ago I was also having an issue where it would set numbers in between 10 <= x < 20 to a very low opacity (possibly the 1 glyph size? idk) although I couldn't reproduce that right now.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CARTO
• ArcGIS

Expected Behavior

It should not hide labels based on font chance. Intuitively the fix would be collisionTestProps: { background: true }, but that does not change anything.

Steps to Reproduce

You can reproduce like this:
https://jsfiddle.net/beasteers/q0y1kmz3/25/

const AIRPORTS = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/airports.json'
const collisionFilterExtension = new deck.CollisionFilterExtension();

const deckgl = new deck.DeckGL({
  // Basemap style
  container: 'map',
  // Can also use 'positron', 'dark-matter' instead of voyager
  mapStyle: "https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json",

  // Initial map location
  initialViewState: {latitude: 50, longitude: 10, zoom: 3},
  controller: true,

  // Visualization overlay
  layers: [
    new deck.ScatterplotLayer({
      data: AIRPORTS,
      getPosition: d => d.coordinates,
      radiusMinPixels: 2
    }),
    new deck.TextLayer({
      data: AIRPORTS,
      getSize: 16,
      getColor: [200, 20, 11],
      fontWeight: 900,
      getPosition: d => d.coordinates,

      getCollisionPriority: d => ({small: 0, mid: -10, major: -100})[d.type],
      collisionTestProps: { sizeScale: 1 }, 
      extensions: [collisionFilterExtension],

      // Default text cases
      getText: d => '6', // works
      getText: d => '6.', // very faded
      // getText: d => '6.0', // not visible at all
      // getText: d => '600', // works

      // getText: d => '12', // not visible at all
      // getText: d => '12.', // very faded
      // getText: d => '12.0', // invisible

      // getText: d => '25', // visible
      // getText: d => '25.0', // very faded
      // getText: d => '25.01', // invisible
      // getText: d => '25.0122', // works


      // // Other font:
      // fontFamily: 'Verdana, Roboto, Helvetica Neue, Arial, Helvetica, sans-serif',

      // getText: d => '6', // works
      // getText: d => '6.', // flickery
      // getText: d => '6.0', // not visible at all

      // getText: d => '12', // works
      // getText: d => '12.', // works
      // getText: d => '12.0', // flickery
      // getText: d => '12.25', // invisible/very faded

      // getText: d => '25', // works
      // getText: d => '25.', // flickery
      // getText: d => '25.0', // flickery
      // getText: d => '25.01', // invisible/very faded
      // getText: d => '25.0122', // works

      // getText: d => 'h', // works
      // getText: d => 'x x', // works
      // getText: d => 'x.x', // invisible/very faded

      // // anchor start:
      // getTextAnchor: 'start',

      // getText: d => '6', // flickery
      // getText: d => '6.', // flickery
      // getText: d => '6.0', // flickery

      // // anchor end:
      // getTextAnchor: 'end',

      // getText: d => '6', // faded flickery
      // getText: d => '6.', // invisible
      // getText: d => '6.0', // faded flickery

    }),
  ]
});

Environment

• Framework version: deck.gl@9.3.2
• Browser: Safari
• OS: Mac

Logs

No response