Android displays rectangle instead of white space

Question

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?

@RightHandedMonkey no. Its at-least conceivable that Foundation uses the offending CSS. — Fresheyeball, Jun 12 '13 at 15:15

score 13 · Accepted Answer · edited Sep 05 '18 at 03:16

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

Good find this is particularly hard to track down. Thanks google. — patrickskim, Apr 23 '13 at 20:37

score 0 · Answer 2 · answered Jan 10 '12 at 02:38

Try editing the same file (with the fix deleting ALL space between lists) on Notepad or Notepad++ and add the spacing and ident with it ane verify again, probably your IDE is adding some character.

If you have notepad++ you might want to convert it to UTF-8 using the Encoding menu, also add the charset definition to the add of the document.

Android displays rectangle instead of white space

2 Answers2