As a newcomer to threejs, I have just begun learning and developing with this technology. I am aware that certain features may be different on mobile browsers compared to desktop ones due to limitations. However, I have encountered an issue that I cannot seem to find answers to through online searches. In my scene, I have set the background color to black ('0x000000') and created a simple sphere with a white wireframe material. When viewed on desktop, the rendering is perfect, showing a black background scene with a white sphere geometry. But once deployed on a domain and accessed via mobile, the colors are completely inverted. I'm unsure of what's causing this anomaly and would appreciate any help or insights. Thank you in advance!
Below is the code snippet where I create a canvas, 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";
// Rest of the code remains unchanged...
No other factors are altering the scene.background color. The provided links display how it appears on desktop and mobile devices, respectively.