Speed-Space chart: rendering of speed-limit tags is not pixel-perfect on the right

[bougue-pe]

What happened?

main bug

On speed-pace chart from osrd-ui, add the Context / Speed Limit Tags.

The display of the right of red 🔴 and grey ❔ sections is not perfect:

related bug?

(this may be treated separately)

Probably a related rendering issue on a Montparnasse to Bordeaux path (the very small portions would need to appear only on zoom?):

at the km ~260 ~290 ~416 and ~500 the rendering is difficult to understand.
Zoom:

Related part of the payload:

  {
    "position": {
      "start": 0,
      "end": 0.596
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 0.596,
      "end": 0.653
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 0.653,
      "end": 3.673
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 3.673,
      "end": 3.807
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 3.807,
      "end": 25.316
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 25.316,
      "end": 25.59
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 25.59,
      "end": 66.56
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 66.56,
      "end": 67.525
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 67.525,
      "end": 67.565
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 67.565,
      "end": 67.84
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 67.84,
      "end": 91.783
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 91.783,
      "end": 92.058
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 92.058,
      "end": 137.427
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 137.427,
      "end": 137.701
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 137.701,
      "end": 137.781
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 137.781,
      "end": 138.055
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 138.055,
      "end": 160.675
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 160.675,
      "end": 160.949
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 160.949,
      "end": 213.008
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 213.008,
      "end": 213.282
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 213.282,
      "end": 243.813
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 243.813,
      "end": 244.101
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 244.101,
      "end": 244.445
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 244.445,
      "end": 244.733
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 244.733,
      "end": 263.1
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 263.1,
      "end": 263.388
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 263.388,
      "end": 263.598
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 263.598,
      "end": 263.886
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 263.886,
      "end": 282.993
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 282.993,
      "end": 283.281
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 283.281,
      "end": 335.218
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 335.218,
      "end": 335.507
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 335.507,
      "end": 401.345
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 401.345,
      "end": 401.633
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 401.633,
      "end": 419.637
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 419.637,
      "end": 419.925
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 419.925,
      "end": 420.024
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 420.024,
      "end": 421.625
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 421.625,
      "end": 451.266
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 451.266,
      "end": 451.554
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 451.554,
      "end": 500.989
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 500.989,
      "end": 501.277
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 501.277,
      "end": 501.378
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 501.378,
      "end": 501.666
    },
    "value": {
      "tag": "missing_from_train",
      "color": "#94918E"
    }
  },
  {
    "position": {
      "start": 501.666,
      "end": 528.152
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 528.152,
      "end": 528.231
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 528.231,
      "end": 531.832
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 531.832,
      "end": 531.963
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 531.963,
      "end": 536.713
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  },
  {
    "position": {
      "start": 536.713,
      "end": 536.796
    },
    "value": {
      "tag": "incompatible",
      "color": "#EAA72B"
    }
  },
  {
    "position": {
      "start": 536.796,
      "end": 537.136
    },
    "value": {
      "tag": "E32C",
      "color": "#494641"
    }
  }

What did you expect to happen?

• Expected the dark border of the red section to be displayed before the wihte pixel column separating from the grey section
• Expected no white pixel column at the right inside of the grey section

How can we reproduce it (as minimally and precisely as possible)?

1. Go to https://openrailassociation.github.io/osrd-ui/?path=/story/speedspacechart-rendering--speed-space-chart-default
2. add the Context / Speed Limit Tags
3. Check right of red and grey portions (Firefox or Chrome)

Related issue:

1. Seen testing Adapt new speed limit source to speedspacechart osrd#8444
2. Create a train from PMP to BX using TGV
3. Check at km of the path provided above

On which environments the bug occurs?

Deployed Storybook

On which browser the bug occurs?

Firefox