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:
http://cloudahoy.com/cesium-basic
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?
