ArcGIS JS 4.x - layers misaligned

Question

Currently using Arcgis JS API 4.28 (https://js.arcgis.com/4.28)

I'm stuck with two layers (basemap and data layer) not aligning up correctly

+++++
UPDATE #1
There is a flat file live demonstration so you can have a look:
https://maps.southoxon.gov.uk/gis/test/mapssouthoxon.html
+++++

+++++
UPDATE #2
It is apparent that the rendering of Arcgis JS v4's canvas/webgl was being affected because I have a 28.2" (3:2) monitor - whether if it was due to the screen resolution: 3840x2560 affected the assigned width and height in the <canvas> and the service layer was configued on maxImageWidth/maxImageHeight to 2048/2048.
I was able to prove the dispercracy when I tried it on my laptop with lower resolution. Has anyone experienced that?
+++++

+++++
UPDATE #3
Resolved - but still no closer to a complete solution - I had this resolved by increasing the mapservice from 2048x2048 to 4096x4096.

Although I have identified how the canvas width/height is calculated. It's by doing this:

let rectangle = = canvas.getBoundingClientRect();
canvas.width = rectangle.width * devicePixelRatio;
canvas.height = rectangle.height * devicePixelRatio;

Attempt #1 - I have tried to do MutationObserver so that I can inject 2048 so that I can match the canvas with the maxImageWidth/Height, I changed the devicePixelRatio by this:

let selfRatio = 2048 / (rectangle.width * devicePixelRatio);
canvas.width = rectangle.width * selfRatio;
canvas.height = rectangle.height * selfRatio;

Unfortunately that still doesn't work.

Attempt #2 I have attempted to use Arcgis JS's esriConfig.request.interceptors so that I can inject before parameters using the following params.requestOptions.query.size, alas that still doesn't work.

Conclusion: the best way to accommodate large physical screens is by adopting the mapservice maxImageSize configuration to 4096x4096, though be mindful whether your server can cope dolling out large image size. Hope this investigation will help others when they find out why their maps are mis-aligned.
+++++

In the dev environment - it's fine, but on the live it's not aligned.

The MapImageLayer is shifted far into the left top corner away from the basemap. It's using canvas webgl, so I haven't got a clue how to investigate and correct it.

Image of misaligned map

Image of correct aligned map

Any help would be greatly appreciated.

This is the code I used to set up the map layers:

const os_map = new TileLayer({
    url: arcgisUrl + "/arcgis/rest/services/Website_basemap/MapServer",
    spatialReference: mpSpatRef,
    opacity: 0.9
});
mpLyrSearch = new MapImageLayer({
    url: arcgisUrl + baseData,
    imageFormat: 'png32',
    opacity:1
})
mpLyrInfo = new MapImageLayer({
    url: arcgisUrl + baseData,
    imageFormat: 'png32',
    opacity:0.6
})

mapX = new WebMap({
    layers: [
        os_map,
        mpLyrInfo,
        mpLyrSearch
     ]
})

mpView = new MapView({
    container: "map", // Reference to the DOM node that will contain the view
    map: mapX, // References the map object created in step 3
    zoom: 2,
    spatialReference: mpSpatRef,
    spatialReferenceLocked: true,
    navigation: {
        gamepad: {
            enabled: true
        },
        browserTouchPanEnabled: true,
        momentumEnabled: false,
        mouseWheelZoomEnabled: true
    }
});