I have a webcam feed that is coming in and we are using the following options for the constraints:

const maxSize = 1920;
stream.getTracks()[0].getTracks()[0].applyConstraints({
    width: {
        exact: maxSize,
    },
    height: {
        exact: maxSize,
    },
    aspectRatio: {
        exact: 1.0,
    }
});

If I check after to make sure the constraints have applied using:

const settings = this.stream.getTracks()[0].getSettings();
console.log('video settings: ', settings);

I can see the width and height are both 1920 and the aspect ratio is 1.0. The webcam is able to go up to like 4000x3000.

I am then streaming that to a video tag that has a height and width of 1920px.

<div class='container'>
  <video id="selfie-video" width="1920" height="1920" />
</div>

.container {
  width: 1080px;
  height: 1920px;
  overflow: hidden;
}
#selfie-video {
  margin: 0;
  padding: 0;
  object-fit: cover;
  width: 1920px;
  height: 1920px;
  left: -420px;
  position: absolute;
  top: 0;
}

I am displaying this on a screen that is set to portrait mode 1080x1920. When I test this in Chrome I have no issues at all unless you hit F11 and put Chrome into Fullscreen Mode or if you open it in electron. As soon as Chrome goes into fullscreen mode or you open it in electron the width is constrained to 1080px. It allows the width to be less than 1080px but not more. I can set it to something crazy like 4000px width and it is just completely ignored. Same goes with height you can set the height anything up to 1920px tall, but if you go over that it is just ignored.

This is causing the image to get squished because 1920px wide is be crunched into 1080px.

The reason we do 1920x1920 is because we let people rotate the image, so we use css to do a transform: rotate(90deg); so it needs to be 1920px for both dimensions.

I can't find any documentation or explanation as to why this is happening. No issues with overflow on any other type of element but this <video>.