Transparent png issues in Windows Phone 7 landscape mode

While developing a widget for a mobile webpage, I ran into a strange performance issue with transparent png in Windows Phone 7 landscape mode.

First off, Windows Phone 7 provides an outstanding mobile phone experience. But like any software platform it too has some issues that catch developers by surprise. The browser used in WP7 is based on Internet Explorer 7 and so while it does inherit IE7’s issues, it also gives WP7 the predictability that is not found in the scores of Android devices that each use different versions of webkit.

So, back to the problem. The widget I was developing was using a transparent png as a background image to provide a translucent background effect for an overlay container that would show on top with widget content. The widget worked fine in the portrait mode, but when the device was put in landscape orientation (in WP7 only) the screen redraws were severely hampered, with 'patches of white’ showing up for many seconds before being redrawn correctly. There was a significant lag in screen redraws, and in even being able to type into a textbox on the page. But when the device returned to portrait mode the screen redraws among other things were just fine and performed returned to normal. This same markup and style configuration worked fine on iPhone and majority of Android devices.

After many attempts at rearranging the markup and styling failed to avoid this issue, the solution I turned to for this WP7 specific issue was to use the opacity filter rather than the transparent background image to achieve the translucent effect.

Before:

 .overlay .translucent
{ 
  background-image: url('/path_to_transparent_background.png');
}

After:

 .overlay .translucent
{
  background-color: #000;
  filter: alpha(opacity=50);
}

This solution addresses the performance issue on WP7, by using a IE specific filter attribute.

Some reading material on opacity are msdn, quirksmode, w3schools.