Hi, I am using css3 transform:rotate to interact with an image, in FireFox once the rotation is applied to the image the content gets blurry, I have read that setting image-rendering to ‘optimizeSpeed’ should help but it didn’t :/ Any idea how to fix this?
- Has been a member for 3-4 years
- Won a Competition
- Contributed a Blog Post
- Author had a File in an Envato Bundle
- Was featured in a podcast
- Interviewed on the Envato Notes blog
- Community Moderator
- Item was Featured
- Author was Featured
- Beta Tester
- Exclusive Author
- Sold between 100 000 and 250 000 dollars
- Bought between 10 and 49 items
- Poland
- Referred between 100 and 199 users
- Has been a member for 0-1 years
- Exclusive Author
- Sold between 5 000 and 10 000 dollars
- Bought between 10 and 49 items
- Europe
- Referred between 1 and 9 users
Sometimes css3 transforms can have bad interactions with anti-aliasing. Can you post your css? Seems to me that ‘optimizeSpeed’ is more like a bandaid than anything else.
weegillis is correct. Even though IE seems to have the most difficult problems understanding standardized CSS , it also seems to render text rather well (which isn’t worth how much IE sucks)
Aside from his solution, the only other way would be using an image (which could cause a slowing of site speed if you’re using this feature a lot)
- Has been a member for 2-3 years
- Repeatedly Helped protect Envato Marketplaces against copyright violations
- Contributed a Tutorial to a Tuts+ Site
- Contributed a Blog Post
- Was featured in a podcast
- Attended a Community Meetup
- Interviewed on the Envato Notes blog
- Community Ambassador
- Envato Staff
- Author had a Free File of the Month
- Beta Tester
- Exclusive Author
- Sold between 1 and 100 dollars
- Bought between 10 and 49 items
- Canada
Laura, please do not link to commercial items free or otherwise in your posts. Thanks!
- Has been a member for 3-4 years
- Won a Competition
- Contributed a Blog Post
- Author had a File in an Envato Bundle
- Was featured in a podcast
- Interviewed on the Envato Notes blog
- Community Moderator
- Item was Featured
- Author was Featured
- Beta Tester
- Exclusive Author
- Sold between 100 000 and 250 000 dollars
- Bought between 10 and 49 items
- Poland
- Referred between 100 and 199 users
Hi I cannot really post the CSS because it is generated by jQuery and it is pretty complicated ;P Also cannot show you an example because it is top secret 
- Has been a member for 3-4 years
- Contributed a Tutorial to a Tuts+ Site
- Contributed a Blog Post
- Community Superstar
- Author had a Free File of the Month
- Item was Featured
- Author was Featured
- Exclusive Author
- Sold between 50 000 and 100 000 dollars
- Bought between 100 and 499 items
- United States
- Referred between 50 and 99 users
Looks like FF10 has some problems with CSS3 Transforms:
http://audiojungle.net/forums/thread/soundcloud-iframe-bug/58954It’s bizarre because other CSS3 3D Transforms in Firefox 10 work but combined with something in the SoundCloud iframe is causing the problem. (I hate to say it but I think there might be a hardware acceleration conflict with Flash
)
