Been having the same problem, engine.resize() seems to do nothing when called after changing the canvas size via CSS (using ReactBootstrap).
Adding engine.resize() to the render loop however, seems to fix the behavior. Aspect ratios are now preserved.
Thought it might be a race condition, like the engine resize was being calculated before the canvas size change had completed (because React may be making the change asynchronously). But even adding delays before dispatching the resize event, does nothing.
TBH I have experienced this behavior somewhere else and wanted to dig into that soon (soon is very abstract. tomorrow? 3 weeks? I sadly don’t know yet :-)).
My temporary solution was to call engine.resize() 5 times (in 5 consecutive frames) instead of once, after a resize is needed. I know it is not a solution, it is just a suggestion to save a bit of computation time in your render loop. a very naive approach would be:
I have the same problem and instead of 5 times, I’m just calling engine.resize() additionally once within the render loop.
I think in my case that’s because I’m opening a new browser tab in JS and this causes the Babylon.js render loop to stop (request animation frame) without having time to handle the resize event… Does that make sense?