Develop Reference

♥ and ♦ in the HTML show as black on Android even though the color is set as red in the CSS

I am developing a card game in HTML, JS and CSS using the Meteor platform. I am using ♥ for the hearts suit and ♦ for the dimonds suit. The color is set to red using color: #FF0000; in CSS. The font-family is set with font-family: 'Times', serif;. On a desktop PC, Mac or iPhone these show up as red icons, but on an Android using Chrome they show up as black. However, the rank is still displayed as red which leads me to believe this is specific to the icons themselves.
Before displaying the suit string I run the code through the SafeString function in Spacebar.
suitString: function(suit) {
var suits = {'H': '♥', 'S':'♠', 'D':'♦', 'C':'♣'}
return Spacebars.SafeString(suits[suit]);
}
I imagine it has something to do with the font that is used to render the icons on Android, but I have been unable to figure out exactly why this is happening. Or it could be something specific to the SafeString function.
Can anyone enlighten me and is there a way to ensure the color on all devices without using images for the suits?
Thanks!

I think this is an Android 5.0.x font rendering bug. It happens on web pages and within applications. So far I've only seen it on Android 5.0.1
I can't reproduce it on android 5.1.0 and 4.2.x
I really drove me mad. At first I though html tables wouldn't accept color.
Here is my test page: http://ibob.github.io/tests/html/
If you open it on an Android 5.0.1 device, the solid red suits won't be colored.
The empty suits look bad, so I guess going with images is the only sensible solution.
EDIT:
Actually after more digging, this seems to be a TouchWiz issue (ie Samsung only).
In their TouchWiz updates after 5.0.1, Samsung changed the font rendering of solid suit colors to something like emoji - immune to coloring. Apparently, it can't be reproduced on non-Samsung devices but it's reproducible on every one with an Android version bigger than 5.0.0.
Note that HTC have done a similar thing, but kept the colors of solid suit colors. However with modern HTC devices you can't draw spades or clubs with a color other than black, and hearts and diamonds with a color other than red.
Other device brands with their custom android mods may have similar issues.

I have the same problem when using ♥ (black heart suit, as described in http://www.w3schools.com/charsets/ref_utf_symbols.asp)
In PC, you can change the color with the css color attribute. However, in android, it shows in black regardless the color you specify.
I suspect that is a problem of the android browser rendering that black heart suit with that black icon.
I used ♡ instead (white empty heart) which takes css color attribute not only for PC but also for android browser.
Alternatively, an image with the desired color or an svg built in the code could use any css color.

Iconfont charachterspace collapses in Android (Fontastic)

I’ve used Fontastic.me to create an iconfont. It works great except in the native browser of Android 4.2.2 and 4.3 (eg: modern Samsung tablets).
In these browsers, the characters of the entire font have no width. This occurs with every font made with Fontastic.me (even the fonts it supplies itself). This is a major problem when centering the icons (horizontally).
I've set up a webpage to test it: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html. The pink color shows the width of the character.
The following screenshot compares the normal behaviour with the AndroidBrowser-behaviour :
http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png
I’m sure it’s because of the Fontastic, because when i use Icomoon as fontgenerator, the problem doesn’t occur. I've also notified the owner but he says he can't look into it because he doesn't now how to install an Android Emulator on his Mac.
Does anyone has a clue to what's happening here? What causes the character-space to collapse?

I had the same problem yesterday. I resolved it with a little bit of a work around. Like you said, when you want to center the icon with text-align:center; it ends up more to the right. If you put it to the left, it aligns left as intended. So I made the speudo element exactly the same width as the icon and centered the speudo element with margin: 0 auto; In that case you can leave the text-align to the left.
I know it's not the perfect solution, but for now it works for me and maybe also for you.

I had the same problem and resolved it by using icomoon.

Disable rectangle (orange border) for text input on focus for Android > 4.0 Webkit

I am building a web app with a cool looking search input. However when I click the input to start typing the input box gets highlighted with a blue border which is fine and it looks good, but in addition to this a white rectangle with an orange border appears over text input and it looks really bad.
I've tried several solutions to this and none of them work. (The CSS styling solutions changing alpha to 0 ect.) [But if you can get those to work on android 4.0 and/or higher then maybe I was doing it wrong and I'll try again]
Others have said that those solutions don't work on the newer Android OS's, which has been my experience as well. I'm personally running Android 4.0.4.
--- Replication of Problem ---
My Android Application & Native Android Browser ...
Chrome Browser for Android ... [ Works fine! ]
Since it works in Chrome then it must be possible to fix. I had thought Chrome was open source so I tried to find their source code so I could possibly find a solution. Source for Android Chrome is not available so it's not open source.

Have you tried setting the outline style to none on focus? You said you have tried css solutions but what have you tried?
It looks to me like an outline on focus which is pretty standard and can be overwritten with
outline: none;
box-shadow: none; /* If this is a box shadow - clear it with this */

Digging into google.com, they don't have a highlight on their input. What they do have is this:
-webkit-tap-highlight-color: rgba(0,0,0,0);
That clears the ugly orange, misshapen rectangle.

re: this fix:
input:focus { -webkit-user-modify: read-write-plaintext-only; }
I tested this on an s3 running 4.0.4 (we were having another problem related to input fields)
It causes an issue whereby text doesn't fill the fields properly when predictive text is turned on, i wouldn't recommend using it.
The issue with input not filling the fields properly (only the first character of every word you type gets entered after you press space!!) is also triggered by having input fields within an element with absolute positioning..
This was the cause of our original issue - probably worthy of another stack overflow post.

I don't think this is related to css/javascript.
I have already seen this behaviour when I enabled "Improve Web accessibility" in the device settings.
Try to go in your device general settings (not the browser's settings), Accessibility, and check if you have something like "Improve Web Accessibility" (Sorry, my device langage is french, I am not sure of the exact name in english).
When this option is checked, you will see big orange borders around editable / clickable content on web pages.

Android 4 ICS Ice Cream Sandwich - iframe that contains a form

Android 4 duplicates inputs when the user focuses them. This duplicate input sits on top of the real input, and it functions pretty normal. This is odd, but ok, it seems to work.
However, if those inputs reside within an iframe, the duplicated input is no longer rendered on top of the original input, and instead it's rendered in a different spot.
Screenshot (duplicated input contains blue border, top left corner):
As far as I can tell, it's actually rendering this duplicated input as if the parent HTML document didn't exist at all. For example, If you add some margin-top inside of your iframe, the duplicate input takes that into account.
I've created a live example for your debugging enjoyment:
http://ghettocooler.net/stuff/code/android-ics-iframe/
Any ideas? Thanks!

Just spent a few hours on this. The thread above by davethegr8 now has the solution. All's needed to fix the problem I had was:
input {
-webkit-user-modify: read-write-plaintext-only;
}
Tested this on a HTC One X default browser and it worked fine.

<p> style incorrect unless background color applied

I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.

While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.

It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.

the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?