Inverted background color in mobile and desktop-CodePudding

so I am a newbie towards threejs and basically have just started to learn and develop in threejs. I do understand due to limitations on mobile browsers there are some characteristics that is not present on desktop may be present on mobile. I however have run into a problem that I cant seem to google or find as to why it happened. I have created a very basic scene with the background color of black ‘0x000000’ and in this scene I have a sphere with wireframe as its material and its color is set to white. On desktop this renders perfect and shows up exactly as black background scene with white sphere geometry. However once Ive test deployed on a domain and accessing it through mobile, the scene and sphere color are totally inverted. I am still unsure what is causing it and any answer would be greatly appreciated. Thanks in advance!

This below code is how I create a canvas and a scene and a sphere.

import "../css/style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

// Debug
// const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.main-bg");

// Scene
const scene = new THREE.Scene();

scene.background = new THREE.Color(0x000000);

// Objects
const geometry = new THREE.SphereBufferGeometry(0.5, 15, 8);

// Materials
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  wireframe: true,
});

// Mesh
const sphere = new THREE.Mesh(geometry, material);

// Lights

// Point light
const pointLight = new THREE.PointLight(0x252525, 0.1);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;
scene.add(pointLight);

// Sizes
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 2;
scene.add(camera);

// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const clock = new THREE.Clock();

const animate = () => 
  const elapsedTime = clock.getElapsedTime();

  // Update objects
  sphere.rotation.y = -0.2 * elapsedTime;
  sphere2.rotation.y = 0.1 * elapsedTime;
  sphere3.rotation.x = 0.7 * elapsedTime;
  sphere.rotation.x  = 0.5 * (targetY - sphere.rotation.x);
  sphere.rotation.y  = 0.5 * (targetX - sphere.rotation.y);
  sphere.position.z  = -0.5 * (targetY - sphere.rotation.x);

  // Render
  renderer.render(scene, camera);

  // Call animate again on the next frame
  window.requestAnimationFrame(animate);
};

animate();

Nothing else besides this is altering the scene.background color. This is how it looks like on desktop.