Black square is displayed when adding a source image (size 64 * n px)

[delpin]

mapbox version: 1.5.1 and latest (2.5.2)

browser: chrome, firefox

Image example

Steps to Trigger Behavior

1. add mapbox instance
2. add image source with coordinates
   2.1 all images are displayed correctly, except for square images with a size of 64 * n (64, 256 ...) Checked for square images with a side of 63 and 65 pixels - it is displayed correctly.
3. add layer

Expected Behavior
Image is displayed on map

Actual Behavior
Black square is displayed on map

Code Example

  mapboxgl.accessToken = 'token...';

  const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [35.457666,54.356717], // starting position [lng, lat]
    zoom: 14 // starting zoom
  });

 map.on('load', () => {
    map.addSource(`testI`, {
      type: 'image',
      url: 'image url ...', // square, 64 *n px
      coordinates: [[35.457666,54.356717],[35.48717,54.356717],[35.48717,54.339361],[35.457666,54.339361]],
    });
    map.addLayer(
      {
        id: `test`,
        source: `testI`,
        type: 'raster',
        paint: { 'raster-opacity': 1, 'raster-resampling': 'nearest' },
      }
    )
 });

[SnailBones]

Thanks for the issue @delpin!

Any chance that you could provide a reproduction in CodePen or JSBin?

[delpin]

Thank you for your reply!
Of course the link to the code: https://codepen.io/delpi5/pen/PoKzqMQ

[SnailBones]

I'm noticing that this only seems to occur with 'raster-resampling': 'nearest'.
It seems to be caused by the code here.