ChrisWTI
21 Sep 2012, 8:03 AM
Sencha Touch version tested:
1.1
2.0
only default ext-all.css
The bug occurs in both 1.1 and 2.0
Platform tested against:
iOS 5 (works fine)
Android 2.x (not sure the version of the phone, but it worked fine)
Android 4.0.4
Android 4.1.1
The bug seems to only occur on Android 4.x devices
Description:
When rotating the device from landscape to portrait, while an overlay is present, the resulting layout will make everything look smaller.
What is happening is, say that in landscape orientation the width and height of the browser is 1024x496(this is from the Galaxy Tab). Then after rotation, the width doesn't update correctly. The width remains 1024, and the height scales accordingly with the correct aspect ration of the device. So in this case the width and height are now 1024x1488. So the content is drawn for a screen size larger than what it was previously, resulting in everything looking smaller.
Test Case:
See this URL : http://dev.sencha.com/deploy/touch/examples/production/overlays/index.html
Steps to reproduce the problem:
This MUST be done on a mobile device. I have not been able to reproduce it in Chrome on a desktop. (tried resizing the window, doesn't have the same behavior)
hold your device in a landscape orientation.
press one of the "show" buttons
rotate the device 90 degrees
Note: While I can consistently reproduce this bug by showing a overlay before rotating the device, I have found that the bug will also occur WITHOUT the overlay present. However, it is not reproducible consistently without having an overlay on the screen.
The result that was expected:
Items on the screen should appear to the same scale as they were before the orientation change
The result that occurs instead:
everything looks tiny
Screenshot or Video:
388503885138852
Debugging already done:
I have checked the values of some variables before and after changing the orientation of the device. The values I am showing here are from a Samsung Galaxy Tab.
Landscape
Portrait Buggy
Portrait Correct
window.innerWidth
1024
1024
600
window.innerHeight
496
1488
920
window.outerWidth
1024
600
600
window.outerHeight
496
920
920
screen.width
1024
600
600
screen.height
600
1024
1024
screen.availWidth
1024
600
600
screen.availHeight
600
1024
1024
document.body.clientWidth
1024
1024
600
document.body.clientHeight
496
1488
920
document.body.offsetWidth
1024
1024
600
document.body.offsetHeight
496
1488
920
Possible fix:
not provided
1.1
2.0
only default ext-all.css
The bug occurs in both 1.1 and 2.0
Platform tested against:
iOS 5 (works fine)
Android 2.x (not sure the version of the phone, but it worked fine)
Android 4.0.4
Android 4.1.1
The bug seems to only occur on Android 4.x devices
Description:
When rotating the device from landscape to portrait, while an overlay is present, the resulting layout will make everything look smaller.
What is happening is, say that in landscape orientation the width and height of the browser is 1024x496(this is from the Galaxy Tab). Then after rotation, the width doesn't update correctly. The width remains 1024, and the height scales accordingly with the correct aspect ration of the device. So in this case the width and height are now 1024x1488. So the content is drawn for a screen size larger than what it was previously, resulting in everything looking smaller.
Test Case:
See this URL : http://dev.sencha.com/deploy/touch/examples/production/overlays/index.html
Steps to reproduce the problem:
This MUST be done on a mobile device. I have not been able to reproduce it in Chrome on a desktop. (tried resizing the window, doesn't have the same behavior)
hold your device in a landscape orientation.
press one of the "show" buttons
rotate the device 90 degrees
Note: While I can consistently reproduce this bug by showing a overlay before rotating the device, I have found that the bug will also occur WITHOUT the overlay present. However, it is not reproducible consistently without having an overlay on the screen.
The result that was expected:
Items on the screen should appear to the same scale as they were before the orientation change
The result that occurs instead:
everything looks tiny
Screenshot or Video:
388503885138852
Debugging already done:
I have checked the values of some variables before and after changing the orientation of the device. The values I am showing here are from a Samsung Galaxy Tab.
Landscape
Portrait Buggy
Portrait Correct
window.innerWidth
1024
1024
600
window.innerHeight
496
1488
920
window.outerWidth
1024
600
600
window.outerHeight
496
920
920
screen.width
1024
600
600
screen.height
600
1024
1024
screen.availWidth
1024
600
600
screen.availHeight
600
1024
1024
document.body.clientWidth
1024
1024
600
document.body.clientHeight
496
1488
920
document.body.offsetWidth
1024
1024
600
document.body.offsetHeight
496
1488
920
Possible fix:
not provided