search

pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.62k stars 1.6k forks source link

Canvas is double the size of the container (iframe) #3351

Closed FredrikNoren closed 2 months ago

FredrikNoren commented 2 months ago

This is a bit strange and I'm not sure what's going on here: the Canvas is for some reason exactly 2x the size of the container div. When I resize the window it resizes the canvas, but still 2x. If I getBoundingClientRect on the container it confirms that the size is correct.

I assume this is some kind of dpi setting, but I can't find exactly where the problem is.

This is also running in an iframe.

FredrikNoren commented 2 months ago

Ok I found a fix: by setting dpr to 1 the size becomes correct. An alternative solution is to create a css class with canvas { width: 100%, height: 100% }

FredrikNoren commented 2 months ago

Ok I think this may have been due to some hacky ways the iframe was set up, just using it "normally" in the iframe seems to work too.