4

I'm building a rather complicated UI widget which has some problems in Chrome. I was able to isolate the problem and am showcasing it at http://jsfiddle.net/8Kb3B/

I have a div inside a td, and I'm trying to toggle the div with jQuery's .animate(). What happens in Chrome is that the td doesn't grow back when the div is returned to its original width. Also, if you pay close attention to the end of the "hide" animation, you'll see that the td's width briefly flashes at the width of the content of the div, which I find weird.

The same thing happens when .toggle(delay) is used. If I use .toggle() without a delay, the whole thing works as intended.

The animation works properly in Mozilla's offerings and even in IE.

Am I missing something really simple here?

Antti29
  • 2,953
  • 12
  • 34
  • 36
  • Maybe is related or not, but some time ago, this other question helped me with animations and tables: http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row – sucotronic Jun 06 '12 at 11:00

1 Answers1

1

I try from my side may be that's help you. Write like this for webkit based browsers:

@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 for more http://jsfiddle.net/8Kb3B/3/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • The jsFiddle I provided is a really, really stripped-down version of what I'm actually working with and embedding additional spans and table-like divs is highly impractical for my purposes to say the least. I was just wondering, since my code example was so simple, that there might be a bug somewhere, be it jQuery or Chrome. – Antti29 Jun 06 '12 at 11:35