05-18-2009 04:17 PM
I am developing a mobile web site and I've noticed some odd behavior on the BlackBerry Bold and Storm. For the most part, eveything renders just fine but a black line appears under some images. Changing the zoom or refreshing often eliminates the black line. Anyone know what could be causing these black lines to appear?
05-21-2009 12:12 PM
05-22-2009 05:35 AM
07-06-2009 04:05 PM
09-11-2009 09:53 PM - edited 09-11-2009 09:56 PM
From what I understand, when zooming in and out, all the sizing of images and content is based on percentages. So what can happen is that when you run percentage scaling on an image it can end up having rounding errors. So sometimes it is right and sometimes it is wrong depending on the content provider and their desired result for the page.
To give you an example, say you had an image that was 33 pixels wide and you had a zoom rate that was a multiplier of 50%. That means that your image after the zoom is 16.5 pixels wide. As you can imagine, you cannot display 1/2 a pixel. In either scenario if the browser rounds up or rounds down it is going to be wrong for someone. Either it will be too wide or too skinny. In the case where it rounds down, you can sometimes see a line where the surrounding element may have rounded up.
My guess is that when you have an image that is imbedded in an anchor hyperlink and the image scaling rounds down and the hyperlink rounds up, you will get the black line. It would likely be the same scenario if the image was in a table cell that scaled in the opposite rounding than the image.
I know the Browser team had been looking at this issue, but I can't say for sure if there has been any resolution for it in browser's yet to be released.
But at least I think it explains what you are seeing.
What you might be able to try is having your image sizes that are even numbers in height and width where most zooming percentages would not result in fractions of pixels. Sounds like a bit of a black art I know, but give it a shot and see if it helps out.
09-16-2009 11:15 AM
Tim, thanks for chiming in. In response to this:
[snipped] My guess is that when you have an image that is imbedded in an anchor hyperlink and the image scaling rounds down and the hyperlink rounds up, you will get the black line. It would likely be the same scenario if the image was in a table cell that scaled in the opposite rounding than the image.
Just want to note for the Brower team, as it appears you're in touch with them, that this issue doesn't necessarily require the image be inside a link to show the black line. I've observed this rendering issue on both standalone images and CSS background images as well.