.ir not working correctly on Android

[dnwhte]

The .ir class doesn't seem to be working on Android. The image is showing up, but the text is as well (over the image). It looks correct on regular desktops, but not on android devices (at least some that I've tested).

Here is my markup.

<a href="/" class="h-company-logo ir" title="Company Name">Company Name</a>

[necolas]

Thanks. I'm going to look into possibly reverting the IR technique we use.

[dnwhte]

It looks like it's because my element is an anchor...

[necolas]

Have you set it to display:block or display:inline-block?

[dnwhte]

block.

If I set it to inline-block, the space of the contained text is maintained and there is is an awkward white-pace above the image (the height of the element's font-size).

[Inkdpixels]

I can also confirm this error, tested it with 2 devices (Android 4 and 3), both had this error. I usually just set a text-intend fix in a mq to have at least a workaround, but still, thats definitly not a proper solution.

[Gavrisimo]

I remember having this issue, but I just can't reproduce it... >.< Everything I tried in this fiddle worked:

http://jsfiddle.net/bKHFm

Last fiddle is 13... http://jsfiddle.net/bKHFm/13/

What I am thinking is it might be some other things that this a is inheriting which makes .ir misbehave? Could you maybe provide entire css file?

[dnwhte]

I figured out what it was (at least in this specific case).

It was picking up the :visited pseudo-class which would override the color: transparent on the .ir class.

Not sure if it's a specificity thing or not. The :visited styles were coming from normalize.css.

So I guess an ugly fix would be to do:

a.ir:visited{
    color: transparent;
}

Not sure if you'd have to compensate for other pseudo-classes as well.

The real problem is probably that Android devices may not like "font: 0/0 a".

[Gavrisimo]

I think that nothing should happen if you overwrite just color, at least nothing happened when I was testing it. I needed to overwrite font-size property in order to show anything over the image.

[Inkdpixels]

Maybe the Android browser has a minimum font-size? Can anyone confirm this? Because in the recent project where I saw this behavior, the visible font-size was definitly greater than 2px (No font-size was set prior to .ir - but a color for the #footer a instead).

UPDATE: Made a jsfiddle for all cases, it seems that Android definitly sets a min. font-size. http://jsfiddle.net/tnwjT/3/

Case 1: Nothig special, a standard image replacement without a prior set font-size / color declaration.
Desktop: looks good
Android: looks good

Case 2: Image replacement with a prior set color declaration.
Desktop: looks good
Android: Text will be displayed

Case 3: Image replacement with a prior set font-size declaration.
Desktop: looks good
Android: Text will NOT be displayed because of the color: transparent; declaration on .ir wich was not overridden

Case 4: Image replacement with a prior set font-size AND color declaration.
Desktop: Text will be displayed.
Android: Text will be displayed.

Case 5: Fixed
A proper fix(wich works) for this would be to set the color declaration to !important I guess.

[necolas]

Yeah, all those declarations should really be using !important. Thanks for taking the time to research the Android situation and share your tests!

I think we should weight up the pros and cons of various approaches again (before we make another stable release) and decide which set of bugs are the least common.

[necolas]

Will be addressed as part of a wider reassessment of the IR technique.