Chrome does not re-calculate width when height changes - css

Question

I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);

Answer 1

My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }

Answer 2

I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.

Answer 3

Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit