I'm developing website with multiple scene(canvas) on page. everything in working fine in Chrome. safari(Mobile), but it's not working in Safari mac.
I'm using https://threejsfundamentals.org/threejs/lessons/threejs-multiple-scenes.html this article's technique of
render to an off screen canvas and copy the result to a 2D canvas at each element
camera.aspect = rect.width / rect.height;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
https://jsfiddle.net/uttam_1137/j5yuLs4t/75/
As you can see in above JSFiddle, it's working perfectly fine in Safari without any resizing issue. And I'm using same concept in my website but in Safari this issue occurs.
UPDATE: I tried on different safari on different mac and find out it works. but still there is small catch, I've to adjust size of browser before seen appears on scree.
link : PulsAero Agency
can anyone tell what's the problem could be.
Solution
Finally I figured it out. using max-width and giving 50% width to the scene, was causing the problem.
because of it in safari width was not whole number. So what i did is below
rect.width = Math.round(rect.width);
added above code in animate function.
working fiddle : https://jsfiddle.net/uttam_1137/j5yuLs4t/76/