Canvas problem when resizing container on iOS

Check out the following link on iOS/Chrome, or a UIWebView. The device you use should have a retina display. The problem happens in normal Safari too, but it requires more attempts to see it:

When you resize the container (it might take a few tries), the canvas gets into a state where it is rendered too large. That is, let’s say the canvas width is set to 1024 pixels. On a retina display, this is rendered into the same space that a div with a width of 512 pixels would occupy…that is, there is a 2:1 pixel ratio on a retina display. As a result, you get a nice, crisp, clear display. However, when I resize the Cesium container, somehow the pixel ratio becomes 1:1, the Cesium widget becomes twice as large, and much of the Cesium widget is no longer visible because it is clipped outside the container. You also lose the crisp image quality, of course. This happens during operations other than resize, such a hiding/showing. I looked through the Cesium source a bit, such as Widgets/CesiumWidget/CesiumWidget.js, which contains the function configureCanvasSize, which is the only place Cesium seems to look at window.devicePixelRatio. I played with it a bit but I didn’t find any solutions.

I’m attaching two images. The one where the entire globe is visible is what I see when I first load the page. The one where only a quarter of the globe is visible is what I see after I resize the container a bit. I didn’t zoom or pan at all.

In our app we allow the user to resize the container on the fly. We also hide/show the Cesium container from time to time.

Any ideas?

Attaching the images again in a different way - they didn’t seem to attach properly in the first post.


It looks like you took down the demo link you posted above. Are you still seeing this problem?



Hey, sorry about that - the link is working again. Yes, it’s still a problem for us.

Thanks! I submitted an issue to GitHub here:
I’m thinking this might be related to our use of the devicePixelRatio that Matt has been looking into recently.