Text-shadow i Google Chrome

Om man någon gång har försökt göra en sida som använder sig utav CSS-egenskapen text-shadow (som jag gör på t.ex. den här sidan) så märker man ganska fort att den egenskapen skiljer sig ganska markant i Google Chrome än i andra webbläsare. Ett exempel (Safari är den övre, Chrome den undre):

Om detta är en bugg eller feature är lite oklart, då texten verkar rendera som den ska vid större textstorlekar. Anledningen till det här är i alla fall att Chrome inte använder sig utav ClearType när man vill använda text-shadow, snyggt är det inte i alla fall. Läs mer om detta här.

Men det finns faktiskt ett enkelt sätt att åtgärda det här, nämligen att man lägger till en till text-shadow som är transparent (de flesta moderna webbläsarna stödjer flera skuggor samtidigt).

CSS:en innan dubbla skuggor:

CSS text-shadow i Chrome

 p {
      font-family: Helvetica, Arial, sans-serif;
      color: #99ccff;
      font-size: 22px;
      font-weight: lighter;
      text-shadow: rgba(0,0,0,0.8) 2px 2px 2px;
      background-color: #AAA;
 }

Och sedan efter (notera kommatecknet):

 p {
      font-family: Helvetica, Arial, sans-serif;
      color: #99ccff;
      font-size: 22px;
      font-weight: lighter;
      text-shadow: transparent 0 0 0,
           rgba(0,0,0,0.8) 2px 2px 2px;
      background-color: #AAA;
 }

Resultatet blir således (fortfarande Chrome underst):

CSS text-shadow i Chrome med transparens