Bug on iPad

CesiumJS
1

In our system, we embed Cesium into a resizable window. On iPad, the resize often results in the camera being way off of the intended POV.

For example, when I run the sandcastle below on iPad (Safari or Chrome), the horizon should be in the middle of the viewer. But it’s not - it’s not in the frame at all. The camera is pointed way up to the sky. If you continue to adjust the height/width of the container in JavaScript, by, for example, adding 1 pixel to the width or height, the viewer rights itself and suddenly all is well. It seems to happen only at certain widths and heights. I thought I could implement a hack by changing the size, then changing it back, but it only works some of the time. I’ve also tried hiding/showing the container with similar results. Also, changing the camera while it’s in this state does not fix anything, unfortunately.

You guys can probably find an easier way to test the code below on iPad. Sandcastle doesn’t allow me to paste on iPad and I had to type everything in manually with the iPad keyboard.

2

Here's a link you can easily follow to demonstrate the problem:
http://cloudahoy.com/tests/ipad_camera/test.html

1) On *iPad*, Chrome or Safari, the canvas shows only the sky. This is *not* correct for the given coordinates.

2) On *desktop*, Chrome or Safari, the canvas shows the horizon in about the middle of the screen. This *is* correct for the given coordinates.

Any ideas? We appreciate the hard work you guys put into Cesium and would love some help with this one to get us off the ground.

3

I haven’t done a lot of testing to 100% prove this out, but what I believe is happening is that Safari on the iPad is not registering that the screen size has changed. Therefor Cesium’s scene believes the screen size is still the entire screen.

To test this out yourself, change the width and height before the viewer initialization. You could also add an event listener to the resize event to see that is and isn’t being triggered.

4

Thanks you for the reply. I was able to get it working by syncing the "width" and "height" attributes of the viewer canvas with the actual width/height of the canvas. So upon every resize, I just say:

var canvas = \( viewer\.canvas \); canvas\.attr\( \{     width: ( viewer.canvas ).width(),
    height: $( viewer.canvas ).height()
} );

Maybe this will help someone else out there with the same problem.

Question for you: what do you mean by "the resize event"? I wasn't able to find this in the docs.