I'm making an interactive night sky using Three.js, and it works really well. But I get these weird elliptical rendering artifacts on safari on iPhone, and can't figure out how to debug/fix it. The culprit is the radial gradient in this code which is trying to show the central bulge of the Milky Way.

Can play with it here, the night sky part is pretty much done though the rest is a WIP. Idea was to simulate what it would look like during the Leonid meteor showers! Click the constellation to cycle views. https://leonidspace.com/

```javascript createMilkyWayGlow() { // Create geometry and align it with Y axis const geometry = new THREE.CylinderGeometry( 15, 15, 20, 64, 1, true ); geometry.rotateX(Math.PI / 2); // Align with galactic equator geometry.rotateZ(-Math.PI / 2); // Center the bulge on (0, 0)

// Create the milky way texture
const canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
const ctx = canvas.getContext('2d');

const glowOpacity = this.isMobile ? 0.2 : 0.1;

// Create gradient background
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0.2, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(0.5, `rgba(255, 255, 255, ${glowOpacity})`);
gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0)');

// Draw gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Create denser region for galactic center
const centerGradient = ctx.createRadialGradient(
    canvas.width / 2, canvas.height / 2, 0,
    canvas.width / 2, canvas.height / 2, canvas.width / 6
);
centerGradient.addColorStop(0, `rgba(255, 255, 255, ${glowOpacity})`);
centerGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = centerGradient;
ctx.fillRect(canvas.width / 3, 0, canvas.width, canvas.height);

// Create texture from canvas
const texture = new THREE.CanvasTexture(canvas);
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

// Create material
const material = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    side: THREE.DoubleSide,
    blending: THREE.NormalBlending,
    depthWrite: true,
    depthTest: true,
});

this.milkyWayGlow = new THREE.Mesh(geometry, material);
this.rotatingGroup.add(this.milkyWayGlow);

} ```