CODEWITHSUNDEEP
htmlcss
Aviel Fedida
Aviel Fedida

Reputation: 4102

CSS, opacity makes some fonts hides

its a big hard to explain so take a look at the code:

HTML:

   <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <h1>Header<span>andAnother</span></h1>

CSS:

h1 {
  font-family: tahoma;
  position: absolute;
}

h1 span {
  opacity: 0.9;
  font-family: 'Rock Salt', cursive;
  font-style: italic;
  position: relative;
  top: 30px;
  left: -100px;
}

Here is a fiddle, now what is the problem?

If you take a look at the word and from andAnother you can see that part of the a is missing, the reason its happen is because the opacity rule, if I remove the opacity the a will be shown as it should, now I almost sure that the problem is because opacity that is lower than 1 creates new stacking context but I can't prove it and I'm not even sure that I'm right, if anyone can explain why and how I'll be very thankful.

Upvotes: 0

Views: 117

Answers (1)

meobyte
meobyte

Reputation: 1320

You can use rbga instead of opacity. i.e color: rgba(0, 0, 0, 0.9);

http://jsfiddle.net/zp6w4dzc/3/

Maybe it's related to this ClearType font bug... https://bugzilla.mozilla.org/show_bug.cgi?id=494320

Editing to add CSS opacity vs rgba: which one is better?

Upvotes: 1

Related Questions