CODEWITHSUNDEEP
cssgoogle-chromewebkitcss-transitions
Hushme
Hushme

Reputation: 3144

Google Chrome Strange Css3 Transition Bug

Im Facing a very strange bug in Google Chrome.

Fiddle

Here is my Code

<div id="wrapper">
    <div class="trans">

    </div>
</div>

body {
    background:green;
    overflow: hidden;
}

.trans {
    width: 155550px;
    height: 200px;
    background: #000;
    position: relative;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0.600s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease-in-out;

}
#wrapper:hover .trans {
        -webkit-transform:translate3d(-155550px,0,0);
}

When you hover on wrapper div and transition starts the background flicks to show transparent area. Any Solution For that bug?. Im using Latest version of Google Chrome on Win8

Thanks

Update : This is what im going to achieve for user who want to know what actually im making

http://jsfiddle.net/vpdpX/

Upvotes: 0

Views: 3954

Answers (2)

Dan Grahn
Dan Grahn

Reputation: 9414

This has to do with you using a width for the div which is obsessively wide.

I'm going to take it what you actually want the div to be 100% of the width of the page, in which case it works.

jsFiddle

.trans {
    width: 100%;
    height: 200px;
    background: #000;
    position: relative;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0.600s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease-in-out;     
}

#wrapper:hover .trans {
        -webkit-transform:translate3d(-100%,0,0);
}

EDIT

To implement this, I would recommend dynamically adding and removing slides offscreen so that you don't have this issue.

Upvotes: 2

SW4
SW4

Reputation: 71150

Firstly, I would re-evaluate what you're trying to do and how you're trying to implement it. Given the information provided its hard to help too much -but the width of your div is excessive- any animation applied to collapse it will almost certainly not do so correctly.

That said, you are using the wrong kind of animation, and the wrong properties- you only need to add a transition on width, then change the width on hover. This works with a reasonably sized div you will only face issues with a div 155550px wide

See fiddle

CSS

body {
    background:green;
    overflow: hidden;
}

.trans {
    width: 100%;
    height: 200px;
    background: #000;
    position: relative;
    transition: width 1s;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */

}
#wrapper:hover .trans {
    width:0px;
}

Upvotes: 1

Related Questions