Forums

anton2k

Hey guy's first post here, just wondering if any one knows how i can fix the jagged edges problem i am facing after transforming an element or image, here is a link to a screenshot of what i am talking about, Click here to see image.

I think what i am trying to do to the element after it is transformed is apply anti aliasing to it but i am not to sure. Oh and here is the code..

#thumb a img:hover  {
	-webkit-transform: rotate(-7deg)!important;
	-moz-transform: rotate(-7deg)!important;
	-o-transform: rotate(-7deg)!important;
}

Regards, Antony.

TheDoc

As far as I'm aware, this is a bug in Chrome, though I'm not sure if it also effects other browsers.

There are some small tricks like adding a border, but this might not work when you're using a drop shadow like you are.

TheDark12

This is interesting, I've noticed those jagged lines before too. It'd be really cool if browsers could implement some form of anti aliasing.

anton2k

Hey guy's thank's for the reply's. The thought of using a 1px solid black border actually crossed my mind, ill try it and report back. Also I have not tested this on any browser apart from chrome.

Just tested it on IE 9 and the transitions are not even working... hate IE... any way i will report back, i am also going try this on safari opera and FF.

Thanks Again.
Regards, Antony.

UPDATE:

Applied the 1px solid back line it does help the appearance a bit but you can still make it the jagged edges, though that as bad. Thing is the 1pc solid border does not go with the design and a white border just puts it back the the same as it was before. Weird bug...

treehouse : what would you like to learn today?

Forums

Jagged Edges - CSS3 Transition