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:

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

Och sedan efter (notera kommatecknet):

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

Resultatet blir således (fortfarande Chrome underst):