Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Opacity Transition Issues

CSS3 Opacity Transition Issues

Problem

I've been working on a site which incorporates CSS3 transitions and I have run into a slight hitch.

Whenever I hover over an element which has it applied to, text in the prior div blurs and returns to normal once the transition is complete. It works fine in Chrome and Safari, but run's into issue with Firefox.

I've recreated the issue here: http://jsfiddle.net/fkbc6/

The transition is currently applied to the list-item, which obviously doesn't work. I've also tried applying it to the image, but with no avail.

Any help would be much appreciated, as I'm all out of ideas.

Problem courtesy of: carlh

Solution

http://jsfiddle.net/fkbc6/2/

The mistake was the CSS you were applying had transform of 0.5 negative degrees (what purpouse?) and Firefox was re rendering all the fonts in a weird way because the style (twice applied in the css btw) was at the top divs of the example

#wepartner {
    overflow:auto;
    margin:70px auto 70px auto;
    padding-top:80px;
    background:#F6F6F6;
    background:rgba(0,0,0,0.02);
    padding:80px 50px 50px 50px;
    -moz-transform:rotate(0.5deg);
    -webkit-transform:rotate(0.5deg);
    -o-transform:rotate(0.5deg);
    -ms-transform:rotate(0.5deg);
    transform:rotate(0.5deg)
}
#wepartner .content {
    -moz-transform:rotate(-0.5deg);
    -webkit-transform:rotate(-0.5deg);
    -o-transform:rotate(-0.5deg);
    -ms-transform:rotate(-0.5deg);
    transform:rotate(-0.5deg)
}

Once removed everything should work just fine

EDIT: Wow, in fact you were applying two rotations with the same value and different directions, be careful with Ctrl-C Ctrl-V :P

EDIT 2: May this link could help you http://petermolnar.eu/linux-tech-coding/ie8-css-filter-matrix-cleartype-font-bug-fix/

Solution courtesy of: David Diez

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Opacity Transition Issues

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×