Cesium container resizing with CSS transition makes frame drop

CesiumJS
1

Hi, I’m new to CesiumJS and trying to apply an animation using CSS transitions. The transition includes only a width change for the parent element of the Cesium container.

<div class="page-container"> <!-- where the width transition happens -->
    <div class="map" id="map-container"></div>
</div>

Whenever I make the transition happen, it causes frame drops (in my case, dropped to between 38 and 50). I am toggling the sidebar to show and hide, which changes the width of the Cesium container, and I would like to ask how I can reduce the frame drops.

2

Hi @sub9707 ,
Welcome to the Cesium community and thanks for posting.
A resize function is called in the render loop by default
https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html?classFilter=viewer#resize
unless useDefaultRenderLoop is disabled, and this resizes the widget to match the container size.

I am curious is the rendering behavior of of the Cesium viewer you see when toggling your sidebar using css transitions the same the resize behavior of the viewer in our sandcastle debugging tool is you click + drag to resize the page or map window, in terms of the smoothness of the rendering of the globe and the container size changes? If not, could you please upload a screenshot of how it looks in your app?

Thank you!
Luke