Safari rendering issue

I’m creating a site like a store. Everithing runs ‘fine’ but I’m having an rendering issue of the labels in the bottles in Safari.

This is how looks in Chrome. (How it should look)

This is how looks in Safari.

Looks like the label of the bottle is inside of the bottle, also, the pack of bottles looks weird, and another certain points where the geometries are too close (I think this could be the reason).

Also tried with renderOrder but didnt work.
I’m ussing, Three R124 and postprocessing.

Any help?

Your camera “near” is 0.01. change to 0.05 or 0.1
Another solution is add to renderer parametr logarithmicDepthBuffer:true
renderer=new THREE.WebGLRenderer({canvas:canvas,antialias:true,alpha:true,transparent:true,premultipliedAlpha:true,physicallyCorrectLights:false,logarithmicDepthBuffer:true});

1 Like

Thanks a lot!

Increase the “camera near” fix a little the problem but keeps existing.
When I try logarithmicDepthBuffer:true the performance lose like 10-12fps.

My scene has a lot of objects, any other idea?

Try near 0.2. By default in three.js precision is highp. Maybe in safari is mediump.

When you say in Safari are you running on laptop or mobile?

Also can you put together a minimal example that demonstrates this? With just one bottle if possible. Could be a browser bug in which case you can report it but you’ll need a reproducible code sample, preferably shared on Codesandbox or similar.