Anti Aliasing in Chrome a tad much...

[freelance84]

The attached image is a sanp shot of the same site in 4 browsers all in XP: FF 4.01, Safari 5, Chrome 11, Opera 11.

The HTML:

<div id="signIn" class="rot270 signIn">Sign In/Up</div>

The CSS:

html, body {
font-weight: normal;
font-size: 0.9em;
font-family: Verdana, sans-serif;
}
.rot270{
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3.375);
}
.signIn{
color: #FFFFFF;
position: absolute;
left:-2em;
        top: 3.5em;
white-space: nowrap;
}

 

As you can see FF and Safari have rendered the text 'Sign In/Up' fine, its crisp and visible. Chrome and Opera however seem to have added some anti aliasing which has resulted in a fairly unreadable blurred effect.

 

Does anyone know if there is some CSS which can correct this?

 

PS/

It is the rotating of the div that has caused this: If i remove the rotation, the text is clear again in all browsers.

 

 

 

[attachment deleted by admin]

[cssfreakie]

this is chrome, as far as i know. You might want to have a look here: http://code.google.com/p/chromium/issues/list?can=2&q=aliased&sort=id&colspec=ID+Stars+Pri+Area+Feature+Type+Status+Summary+Modified+Owner+Mstone+OS&cells=tiles

[freelance84]

Hmm, ok.

 

The rotating div seems to work fine on larger font sizes. It just seems to be the smaller fonts that struggle.

 

Cheers, i'll examine that link