OpenLayers: GeoTIFF on top of OSM layer shows large border

I am trying to load a GeoTIFF on top of an OSM layer with the openlayers library (v10.2.1).

The code to load the GeoTIFF roughly looks like this:

      this.modelLayerSource = new GeoTIFF({
        projection: 'EPSG:4326',
        interpolate: true,
        normalize: false,
        sources: [
          {
            url: this.modelService.getModelFileUrl(c),
            bands: [1]
          },
        ],
      });

      if (!this.modelLayer) {
        this.modelLayer = new TileLayer({
          style: {
            color: [
              'interpolate',
              ['linear'],
              ['band', 1],
              2,
              [255, 255, 255],
              2.5,
              [4,90,141]
            ]
          },
          source: this.modelLayerSource
        });
      }
      
      this.modelLayer.setSource(this.modelLayerSource);

      if (!this.map.getLayers().getArray().includes(this.modelLayer)) {
        this.map.getLayers().insertAt(1, this.modelLayer);
      }

      this.modelLayer.changed();
      this.modelLayerSource.refresh();

The map with the OSM layer is initialized as follows:

    useGeographic();
    proj4.defs("EPSG:32718","+proj=utm +zone=18 +south +datum=WGS84 +units=m +no_defs +type=crs");
    proj4.defs("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
    proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs +type=crs");

    register(proj4);

    this.map = new Map({
      target: this.myMap.nativeElement,
      layers: [
        this.osmLayer,
        this.vectorLayer
      ],
      view: new View({
        projection: 'EPSG:3857'
        // center: fromLonLat([-76.2591842, -6.5692892]),
        // zoom: 6
      }),
    });

The result looks like this (ignore the colored circles and grey squares these come from a vector layer that is displayed correctly):

Here is another screenshot from QGIS with the same file:

How can I get rid of the large white border around the GeoTIFF in openlayers?

You need to use an alpha band when styling. The source may already have one (although if it exactly fits tiles in EPSG:4326 it may not need it in that projection). If there is no alpha band and you are reprojecting to a different tile grid you can force one to be added by specifying a nodata value.

  this.modelLayerSource = new GeoTIFF({
    projection: 'EPSG:4326',
    interpolate: true,
    normalize: false,
    sources: [
      {
        url: this.modelService.getModelFileUrl(c),
        bands: [1],
        nodata: NaN,
      },
    ],
  });

  if (!this.modelLayer) {
    this.modelLayer = new TileLayer({
      style: {
        color: [
          'case',
          ['==', ['band', 2], 0],
          [0, 0, 0, 0],
          [
            'interpolate',
            ['linear'],
            ['band', 1],
            2,
            [255, 255, 255],
            2.5,
            [4, 90, 141]
          ]
        ]
      },
      source: this.modelLayerSource
    });
  }