Handling Canvas Resizing in Three.js for Safari

Based on the issue you're describing with Safari, it sounds like you're experiencing a common problem with canvas resizing when the browser UI elements (like the address bar) appear or disappear during scrolling.

This is likely related to how you're handling the canvas size in your Three.js application. When using Three.js, you need to properly update the renderer size when the viewport dimensions change.

Recommended Solution

You should implement a resize handler that updates your Three.js renderer when the window size changes. Here's how you can do it:

JAVASCRIPTCopied
// Initialize renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
document.body.appendChild(renderer.domElement);

// Function to handle resize
function onWindowResize() {
  // Get the current window dimensions
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  // Update camera aspect ratio
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  
  // Update renderer size with device pixel ratio consideration
  renderer.setSize(width, height, true);
}

// Add event listeners
window.addEventListener('resize', onWindowResize);

// For Safari specifically, you might need to listen for scroll events
window.addEventListener('scroll', onWindowResize);

// Call once to set initial size
onWindowResize();

Additional Considerations

1. Make sure your canvas container has the correct CSS:

CSSCopied
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

canvas {
  display: block; /* Removes extra space below canvas */
  width: 100%;
  height: 100%;
}

2. For Safari specifically, you might need to handle the viewport height changes that occur when the address bar appears/disappears:

JAVASCRIPTCopied
// For mobile Safari viewport height issues
function updateHeight() {
  // Use setTimeout to ensure it runs after the browser UI has settled
  setTimeout(() => {
    const vh = window.innerHeight;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
    onWindowResize();
  }, 100);
}

window.addEventListener('load', updateHeight);
window.addEventListener('resize', updateHeight);
window.addEventListener('scroll', updateHeight);

Then in your CSS:

CSSCopied
.full-height {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
}

This approach should help ensure your Three.js canvas properly resizes when scrolling in Safari, especially when the address bar appears or disappears.