I got OverconstrainedError only Firefox on Macbook Pro

here is my code

const userVideo = document.getElementById("user-video");

const CONSTRAINTS = {
  audio: {
    autoGainControl: false,
    channelCount: 2,
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 48000,
    sampleSize: 16,
  },
  video: {
    facingMode: "user",
    width: { min: 0, ideal: 320, max: 320 },
    height: { min: 0, ideal: 240, max: 240 },
    frameRate: { ideal: 15, max: 30 },
  },
};

(async () => {
  const userMedia = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
  console.log(userMedia);

  userVideo.srcObject = userMedia;
})();

It is working fine on Chrome and Safari BUT in Firefox I got an error OverconstrainedError

MediaStreamError
constraint: "width"
message: "Constraints could be not satisfied."​
name: "OverconstrainedError"
stack: ""

So I try to change width and height constraints to

width: { min: 0, ideal: 320, max: 360 },
height: { min: 0, ideal: 240, max: 300 },

IT'S WORKING FINE!!!!

Ps. I tested WebRTC on this website https://test.webrtc.org/ Firefox on MacBook not support 320x240 but another browser and another OS can support it.

I want to know why. Please explain to me.