My website utilizes threeJS for rendering to a canvas with a white clear color set (renderer.setClearColor(0xffffff)).
There is also a div overlay displayed on top of the canvas for a drawer, which animates onto the screen.
The issue arises when this setup is executed on Safari, causing the overlay to render in an unusual manner.
https://i.sstatic.net/eAlUgUTv.gif
It's evident that the overlay effect appears differently on the canvas connected to threeJS compared to the canvas below where the result is copied into.
This discrepancy might be due to how Safari handles webGL connections, but is there any workaround available?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384c504a5d5d780816090e001608">[email protected]</a>/build/three.module.js"
}
}
</script>
</head>
<body>
<style>
#overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.2);
pointer-events: none;
opacity: 0;
animation: fadein 0.3s ease-in-out forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<div id="container">
</div>
<canvas id="static"></canvas>
<button id="button">test</button>
<script>
document.querySelector("#button").addEventListener("click", () => {
if(document.querySelector("#overlay")) {
document.body.removeChild(document.querySelector("#overlay"))
return;
}
const div = document.createElement("div");
div.id = "overlay";
document.body.appendChild(div);
})
</script>
<script type="module">
import * as THREE from 'three';
let camera, scene, renderer;
let mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 2;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor(0xffffff)
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 300, 300 );
animate()
//renderer.setAnimationLoop( animate );
document.querySelector("#container").appendChild( renderer.domElement );
}
function animate() {
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
document.querySelector("#static").getContext("2d").drawImage(renderer.domElement,0,0)
}
</script>
</body>
</html>