invisible lowercase 'o's in textarea [closed]

Question

For whatever reason, lowercase 'o's are invisible in my textarea. Every other letter works fine. If I highlight it, its still invisible.

 ______________             ______________ 
|              |           |              |
| hello world! | shows as  | hell  w rld! |
|______________|           |______________|

When I actually post the form, or copy and paste from it, the 'o's are indeed there.

I'm just going to list everything that contributes to this textarea, and hopefully you guys can suggest what might be going wrong. I'm baffled.

• Both Firefox and Chrome
• Twitter Bootstrap
• Font Awesome
• Automatically resizing textarea following this tutorial
• The styling below (its SASS)

Border-radius and box-sizing do the expected, and are used throughout the site without issue.

textarea {
  width: 100%;
  height: 50px; // this is overwritten with javascript
  color: white;
  text-shadow: black 0.05em 0.05em 0.08em;
  background: none;
  border: 1px solid #ddd;
  @include border-radius(0); // to override bootstrap
  @include box-sizing;
  resize: none;

  &:focus {
    background: rgba(250, 250, 250, 0.2);
  }
}

I just want to reiterate, every other character on my keyboard shows up fine. What could possibly be causing these problem-'o's (sorry)

Answer 1

This only effecting lower case 'o' would point to this being an issue with that specific glyph in the font that is being used to render the text in the textarea. Have you tried using a different font face?

See: https://github.com/FortAwesome/Font-Awesome/issues/417