CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
Osadchiy Yuriy
Osadchiy Yuriy

Reputation: 41

Chrome transition bug on hover

How to fix a bug in Chrome transition on :hover? Some :hover normally, and then does not work. Maybe I need jQuery solution?

I give an example, all whether there is such a bug when transition:

.item {
    background: rgba(106, 204, 201, 1);
    background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
    background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
    width: 300px;
    height: 150px;
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.item:hover {
    opacity: 0.5;
    transition: opacity 1s;
}

.title {
    position: absolute;
    top: 20%;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translate(0, 0);
}

.item:hover .title {
    transform: translate(0, -20px);
    -webkit-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
}
<div class="item">
    <div class="title">title1</div>
</div>
<div class="item">
    <div class="title">title2</div>
</div>

Upvotes: 3

Views: 834

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Try this:

.item {
    background: rgba(106, 204, 201, 1);
    background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
    background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
    width: 300px;
    height: 150px;
    display: inline-block;
    position: relative;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

    .item:hover {
        opacity: 0.5;
        transition: opacity 1s;
    }

.title {
    position: absolute;
    top: 20%;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

    .item:hover .title {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }
<div class="item">
    <div class="title">title1</div>
</div>
<div class="item">
    <div class="title">title2</div>
</div>

Don't see any bugs in latest Chrome (Version 44.0.2403.130) on OS X 10.10.4 and Windows 8.1.

Upvotes: 1

Related Questions