CODEWITHSUNDEEP
cssgoogle-chrometransition
user3715760
user3715760

Reputation: 33

Element twitches in Chrome - CSS width transition

My element twitches when I use width transition in Chrome. How can I fix this?

.search-group input {
   width: 85px;
   -webkit-transition: all ease-in-out .15s;
   transition: all ease-in-out .15s;
}
.search-group input:focus {
   width: 150px;
   outline: none;
}

JSFIDDLE

VIDEO(sorry for quality)

Upvotes: 3

Views: 1423

Answers (1)

Hristo Valkanov
Hristo Valkanov

Reputation: 1687

Ok I think i fixed it. I added:

.window_label{
    -webkit-backface-visibility: hidden;
}

jsfiddle

At least on my machine it fixes the twitching for Chrome. I found out that it was a official bug, as stated here, here and many other places on the Internet.

As stated in the comments, this bug affects elements with altered opacity.

EDIT: Try this jsfiddle. I think I fixed it. I'm leaving the above resolution because it can serve someone. Anyway the problem was with

display:table

It was bugged and when the extra '}' appeared, it nullified the '.search-group' field css.

I moved the display option form there to '.header-search' and here is the end result:

.header-search {
    position: absolute;
    top: 6px;
    right: 10px;
    display: table;
}
.search-group {
    position: relative;
    border-collapse: separate;
    display: table-row;
    float: right;
}

for me it solves the problem. Try it and tell me if it fixes it for you too.

Upvotes: 4

Related Questions