CODEWITHSUNDEEP
csstextwebkit
user300979
user300979

Reputation: 437

Css webkit animation causing blurred text inside seperate element

I use -webkit-animation to make and icon in a menu spin when hovered. If it's clicked a drop down menu appears with blurry text. It's not until I move the cursor off the icon that the text goes back to normal. Now this is odd to me because the animation is causing the blur in a separate element and I don't get why.

So I have something like this.

<li class="drop">
    <a href="#" class="drop-toggle">
        <span class="nav-icon settings"></span>
    </a>
    <div class="drop-menu">
        <ul role="menu">
        ....my list with text

I then make icon spin like so.

.nav-icon {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    background-image: url("images/menu-sprite.png");
}
.nav-icon.settings {
    background-position: 0 0;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}
.nav-icon.settings:hover {
    -webkit-animation: spin 2.7s infinite linear;
    -moz-animation: spin 2.7s infinite linear;
    -o-animation: spin 2.7s infinite linear;
    -ms-animation: spin 2.7s infinite linear;
}

And for whatever reason that makes the text blurry on hover. I tested in IE and Mozilla and it works fine so only in Chrome.

Upvotes: 0

Views: 586

Answers (2)

Lorenzo Meriggi
Lorenzo Meriggi

Reputation: 166

I had a similar problem and I finally fixed with a selector selecting the text and applying:

li p {transform:none}

hope this helps!

Upvotes: 0

Ivan
Ivan

Reputation: 549

Try adding this css to the blurry text (I'm assuming it is the ul element in your example). If your list contains an anchor make sure you target that. Otherwise just the li should be fine.

So either...

.drop-menu ul li {
    -webkit-transform: translateZ(0px);
}

or...

.drop-menu ul li a {
    -webkit-transform: translateZ(0px);
}

Upvotes: 1

Related Questions