With the growth of IoT (Internet of Things) and handheld devices, device orientation is very important to users. Whether a user is watching a movie or taking a photo they would like an adaptable product that shifts to their needs when the device is rotated. That’s why it’s critical to avoid app crashes when the user switches from landscape to portrait mode or vice versa.

This post is part of a series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.

Device Orientation

The two device orientation types are portrait and landscape mode. Portrait references the  traditional format of painted portrait of an individual. Portrait is where the height is greater than the width. Landscape mode has been said to reference an outdoor artistic scene. Landscape is where the width is greater than the height. When it comes to detecting device orientation there are two Javascript events; DeviceOrientationEvent and DeviceMotionEvent. DeviceOrientationEvent is sent when an electromechanical device called an accelerometer detects a change to the orientation of the device. DeviceMotionEvent, occurs only after the DeviceOrientation event has been added, as it is considered a listening event.

App crash when switching from portrait to landscape mode bug

While testing an entertainment news site, one of our testers found a bug during exploratory  testing by attempting to switch from portrait to landscape orientation. First, the tester clicked to play a video on the site while in portrait orientation. Then, the tester rotated the smartphone  from portrait to landscape orientation while the video was still playing. When the tester switched to landscape, the app crashed.

The bug was initially discovered on Apple iPhone 5s, 8.4.1. However, it ended up being reproducible on multiple devices and versions of iOS.

Lessons learned and best practices from test IO

This bug highlights the importance of understanding device behavior during orientation changes and ensuring you have the proper events and listeners set up. If you’re using Javascript you must ensure that you are adding the proper events and listeners for device orientation. If you’re using DeviceOrientationEvent and DeviceMotionEvent, also add the following script for your listening event:

window.addEventListener("deviceorientation", handleOrientation, true);

In this case, the app may have crashed because it restarted when the orientation changed. Most likely it destroyed the previous session and had trouble with the restart. There could have been an issue with the processing of the width and height, when changing from portrait to landscape, with regards to the video.

The video file itself could have been corrupt, causing the entire app to crash. The tester had to tap the video more than once for playback while in portrait mode, which could have caused underlying functionality issues with the app’s controllers.