Resizing embedded aframe doesn't trigger renderer resize without window size change

[jeffreywys]

In my situation, I made the embedded aframe inside a div container that the aframe has 100% width and height to the container. When I just change the size of the container and keep the window size unchange, the aframe renderer does not get resizing and the model inside aframe get weird. Is there any way that I can trigger the renderer resize of embedded aframe when I change its size? Thank you.

• A-Frame Version: 0.9.0
• Platform / Device: Desktop

[dmarcos]

This is a question appropriate for StackOverflow. We use Github for bugs and feature requests. Make sure to share a link to a simple runable example that illustrates your use case. Thanks for understanding

[jeffreywys]

I think it is a aframe bug because the aframe resize function will not be triggered when the embedded aframe size changes. It will only be triggered when the window size changes. May be I am wrong, I am not sure yet. I will find a work around solution to make it work. Thank you.

[dmarcos]

I recommend using iframes for embedded scenes that are going to change size dinamically.

[jeffreywys]

Okay. Thank you for the suggestion.

[zodywoolsey]

If you need a workaround for this so that you don't have to deal with the problems of interaction that come with using an iframe, you can use:

// Declare a variable for the scene dom element
let aScene = document.querySelector('a-scene');

// Inside the code that fires on resize (you should be able to use the 'onresize' event listener)
aScene.camera.aspect = aScene.clientWidth/aScene.clientHeight;
aScene.camera.updateProjectionMatrix();

This won't fix everything. I'm working on diving deeper because it seems that the cursor raycaster is not calculated correctly after doing this. There must be other functions to run while dynamically resizing.

[felipenmoura]

That's very interesting @zodywoolsey and I will try that. And yes, cursors do NOT work properly after resizing the screen! I have a button that triggers a requestFullscreen call and this makes all the clickable elements useless :/

I even asked this in a stackoverflow question: https://stackoverflow.com/questions/58827452/hold-the-aframe-arjs-startup

[cyango]

Is there any fix on this? I'm trying to avoid using an iframe, and this is also happening to me.

[richardanaya]

I resolved this by having a-scene with this style:

<a-scene embedded style="height: 0; padding-bottom: 60%;">

This forces the a-frame to remain the same aspect ratio by setting its height to 60% of the parent elements width, here's why it works in more detail:

https://stackoverflow.com/questions/11535827/responsive-height-proportional-to-width/18164974

[clinuxrulz]

Call the resize() method on the a-scene element without any params also fixes it. But not a part of public API.