Hi guys 
I have a scene which does not render well in Safari. I’ve only tested it on Safari 14.1.1, so no idea how it performs on other versions. The scene renders as expected in all other common browsers.
In Safari, the scene loads but is heavily distorted/skewed. It’s quite bizarre.
There are no console warnings or anything useful to note.
I have enabled and disabled webGL2 in the browser but it makes no difference. To be honest I don’t think it’s related to this as the scene does render with all colours and shading etc…it’s just heavily skewed…
It’s a React project and I’m using the react-babylonjs library.
If anyone can shed any light, that would be great!
Thanks! 
This is really strange and I have never had skewed rendering before.
Could you share some screencap and a repro so that we could investigate it ?
I can’t share the work I currently doing…I’ll see if I can re-create it on a smaller scale and send you screen captures and the repo.
Another thing…I have only viewed this component in Storybook (a tool for building components in isolation). I don’t see why this should have any effect, but worth mentioning it just in case
skewed is really strange I wonder if it could be related to test automations ? but in any case a small repro without your real assets or experience would be perfect.
Sorry for the delayed response.
It was caused mostly by me being an idiot 
I’m using the react-babylonjs library (not sure if this is specific to this library, however).
In all other browsers, the canvas element filled it’s parent. For Safari this wasn’t the case and I had to explicitly set the canvas to have a 100% height and width which solved the issue. Safari was respecting the height of the container but not the width which caused a very strange looking render.
2 Likes