While developing a mobile version of our website, we encountered several rendering bugs in the BlackBerry Browser, and could not find any reference to them on Google. By far, the most frustrating bug we encountered was the unnecessary and forced scaling of background images.
Bug #1: Forced scaling of background images
This image is a screenshot from Firefox of a test page we developed. The element on the left is a 100px x 100px <div> with a background image set. The background image is an 800px x 800px PNG image, so obviously the majority of this background image is cropped out of view.
The graphic on the right is actually 10 <div>s absolutely positioned on top of each other and styled with CSS. The two elements should look identical. Firefox renders them correctly.
This screenshot from the BlackBerry browser of the same test page shows that the background image has been scaled down considerably. It’s as if the Blackberry is scaling the image down so that the whole width of it could fit on the screen, even though its parent container is only 100px wide. This becomes more apparent as we truncate the size of the background image.
Now the background image is only 400px wide.
And this one shows the background image cropped to 300px wide, which is below the BlackBerry’s screen width of 360px;
Where this scaling really hurts is in the use of image sprites. If your image containing the sprites is wider than the BlackBerry’s screen width, all the sprites will be scaled down and will no longer line-up with a pixel-perfect layout.
Two items of note: the scaling only happens when the width of the image is larger than the screen width. Large heights make no difference. Also, the scaling occurs despite having the RIM-specified “handheld” meta tags (<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> or <meta name=”HandheldFriendly” content=”true” />).
Bug #2: Dithered scaling instead of anti-aliased scaling
When the BlackBerry scales an image up or down, it doesn’t anti-alias the edges, but instead dithers them. Even worse, it appears to restrict itself to the color palette of the original image.
Bug #3: Upwards scaling when BlackBerry is tilted to the side
Tilt your BlackBerry to the side and watch even more fun happen. All elements on the page are scaled up, still using the dithering messiness. This affects not only images but also html elements styled with css.
This screenshot is almost laughable. The background image on the left <div> has first been scaled down, and then subsequently scaled up again, each time adding more dithering ugliness. The <div>s on the right were scaled up slightly. The css borders (which should all be 1px high and 1px wide) are now of varying, seemingly random heights and widths.
Conclusion
The only workaround to the first two bugs is to make sure background images or css sprites are not wider than the screensize. Sprite images should be tall and narrow.
With all of this image scaling and dithering, we pretty much threw out the idea of having the BlackBerry use a sophisticated version of our mobile site—it’s just too much trouble and not worth the results. Now we do browser sniffing and send iPhones and iPod Touches one version of the site, and a minimalist version to all other mobile devices, including the BlackBerry.
It’s really a shame that Research In Motion hasn’t either made a better browser or adopted a third-party mobile browser which would be able to render standards-compliant sites correctly. Ultimately, it’s the BlackBerry users who are suffering as a result.
Update: Feb 21, 2010
It seems RIM has finally decided to ditch its terrible browser and move to Webkit. Thus with iPhone, Blackberry, and the Android all on Webkit’s foundations, we might actually be able to build great mobile websites without all the extra cruft.
Tags: blackberry, browser, bug
[...] BlackBerry Browser Bug with Background Images [...]
Thanks for replying to my thread on the blackberry forums. So much appreciated! I’m going to do the narrowing down of the images.
Just to add:
I had another method to work around the sprite width when the basic image is wider than the width of the blackberry, but it’s rather bulky; something like this (roughly from memory):
.spriteholder { width:50px; height:50px; overflow:hidden; }
basically just injecting an img element into every sprite holding container, with a forced image size- the browser shouldn’t load the image more than once, but there’s all the extra HTML code per sprite that adds to download time. And terribly, the dithering STILL takes place, it looks terrible, but the blackberry auto-resizing does not happen. Very strange.
-Tom
Thanks for this. Now you do show up on Google, and it’s been very helpful to figuring out this puzzling behavior!
[...] BlackBerry Browser Bug with Background Images « One Hat Design … [...]