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
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屋!