htmlmobileandroid-browser

Android displays rectangle instead of white space

I have a reoccurring problem with the Android Browser. This is a mobile website NOT a webview. Things as simple as

   <li>
        Some Text
   </li>
   <li>
        Some Text
   </li>

Renders fine everywhere but in Android, where between the list items I get a little rectangle, (like the character not found in this font rectangle) between them. I can only assume that in my code there is a line-break or white space character that is recognized as such everywhere but for Android. Its very annoying and I have yet to find any documentation on the subject. Occasionally I have to resort to the 'Jesus Fish' hack to get rid of it. For those who don't know this hack its an old last resort from ie6's handling of whitespace and linebreaks hack looks like this:

    <li>something</li
    ><li>something</li
    ><li>something</li>

I am using intelliJ IDE if that helps. Does anyone have any idea why this occurs?

Solution

  • The real correct answer is...

    Check your CSS rules. If you have text-rendering:optimizeLegibility then the boxes appear ONLY in Android devices.

    I figured this out by chopping my CSS file in half, then half again and so on until the boxes disappeared. Having narrowed down the location in the CSS, I re-added the last bit I deleted and then I deleted rules one at a time. Eventually, I hit the offending CSS rule and narrowed it down further. So, in a nutshell, this is the correct answer.

    Before View:

    Droid screen capture of offending little squares

    Offending CSS:

    Screen Capture of Offending CSS

    After Rule Removed:

    enter image description here

    There is also this bug report at Google: http://code.google.com/p/android/issues/detail?id=15067&q=text-rendering&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars