Geek asks and answers

Animating divs inside td leads to unstable behavior in Chrome

I am creating a rather complicated user interface widget that has some problems in Chrome. I was able to isolate the problem and demonstrated it at http://jsfiddle.net/8Kb3B/

I have divinside tdand am trying to switch div using jQuery .animate(). What happens in Chrome is that it tddoes not return when it divreturns to its original width. Also, if you pay close attention to the end of the "hide" animation, you will see that the width tdblinks briefly over the width of the content div, which I find strange.

The same thing happens when used .toggle(delay). If I use .toggle()without delay, all this will work as intended.

Animation works correctly in Mozilla offerings and even in IE.

Am I missing something really simple?

+5
source share
1 answer

I try on my part, maybe this will help you. Write as in browsers webkit:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    td {
    padding-right:2px;
    }
    span{
    left:5px;
    position:absolute;
    }
    #content {
    border: 2px solid red;
    width: 100px;
    height:20px;
    display:table;
    overflow:hidden;
    position:relative;
   }
}

Check this out for more http://jsfiddle.net/8Kb3B/3/

+1
source

More articles:


All Articles