Chrome在高度变化时不重新计算宽度 [英] Chrome does not re-calculate width when height changes

问题描述

我有一个缩略图列表，其中包含链接和图片，因此当用户悬停 li 元素时，它的高度变为100％，但它的工作原理错误在Chrome中有些奇怪的原因。我不明白为什么在Chrome中，悬停的 li 宽度不会调整为其新尺寸。

（注意：这是我的问题的简化版本）

此外，此问题仅发生在：hover 。但不是，让我们说，：nth-​​child

这个想法是让Chrome重新计算宽度，通过给图像一个新的高度，在<$ c $上几乎 c> li：hover 状态。但这是不够的Chrome。转换也必须应用于 img 。这是所有的voodoo编码，但这是最糟糕的解决方案，我可以想出：

  ul {list-style：没有; display：inline-block; height：80px; white-space：pre; width：100％; } 
 li {display：inline-block; vertical-align：middle;身高：60％; -webkit-transition：.2s;过渡：.2s; } 
 li：hover {height：100％; } 
 li a {height：100％; padding：0 2px;显示：block; } 
 li a img {height：96％; -webkit-transition：.2s;过渡：.2s; } 
 li：hover a img {min-height：96％; } 
  

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);

解决方案

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%; }

这篇关于Chrome在高度变化时不重新计算宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！