CODEWITHSUNDEEP
csscss-transitionscss-transforms
Alex
Alex

Reputation: 283

CSS translate3d is scaling chaotically when hover (Chrome)

Basically CSS 3d transform is jumping (or scaling chaotically) on hover event. To see this glitch you need to hover in and out quickly several times (only Chrome).

Example 1
Example 2

Code is as simple as possible:

<div></div>

div {
    width: 50px;
    height:50px;
    background: blue;
    -webkit-transition: -webkit-transform 0.3s ease-out,
                        background 0.3s ease-out;
}
div:hover {
    background: red;
    -webkit-transform: perspective(100px) translate3d(10px, 10px, 20px);
}

I have tried to attach the -webkit-backface-visibility: hidden; as I found this solution in related jumping/flashing issue in Chrome, but in my case it did nothing at all.

Does anyone know this issue? Or I am doing something wrong?

Upvotes: 2

Views: 2588

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

This happens because you're not providing any default translate values on your elements prior to their :hover states. Simply add in default values for these and the problem goes away:

Example 1

div {
    width: 50px;
    height:50px;
    background: blue;
    -webkit-transition: -webkit-transform 0.3s ease-out,
                        background 0.3s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
}

JSFiddle demo.

Example 2

div:nth-child(2) {
    background: rgba(0, 0, 255, .5);
    -webkit-transform: translateZ(0);
}

JSFiddle demo.

Upvotes: 3

Related Questions