use*_*292 39 html css html5 css3
我绝对用我这个非常令人沮丧和奇怪的CSS问题撕掉了我所有的头发.
我正在使用Bones样板制作一个网站,它一直很棒,直到现在......
它使用流体网格系统,我最近尝试创建一个简单的画廊,我已经制作成一个网格(4个图像,每个图像包裹在一个四分之一列,第一个/最后一个类添加到第一个/最后一个图像).
如果将鼠标悬停在图像上(由于某些原因,前三个图像特别明显),您会注意到由于某些原因,它们会将宽度改变一两个像素.图像设置为max-width:100%,我感觉这是某种罪魁祸首,因为如果你给图像一个"固定"的宽度(例如.gallery-icon img {max-width:165px;},它解决了问题,但作为一个流畅的网格系统,我不能下去那个路线,因为如果调整浏览器大小,图像保持165px,即使我根据媒体设置了4种不同的宽度,在介质尺寸之间,图像也不会正确对齐.
如果它不是transition效果问题(如果我transition关闭,图像较低opacity,但没有动画),它会工作,因为我希望它工作:(
请帮帮我们!
这是一个空的演示站点,它运行了骨架样板,只不过是页面上的库.如果你看到震动问题,请告诉我.
(我无法在jsfiddle上重新创建它,所以我将它安装在我躺在hehe周围的旧域上)
编辑:我刚刚注意到问题似乎发生在宽度和高度都比div大的图像上.图像1 + 3是这个,他们有错误,而图像2,4似乎没问题？和图像2 + 4的高度比div小.....但即使我将图像设置为最大高度,问题仍然存在.
EDIT2:添加了一个快速视频来显示问题(最新的Firefox和Chrome)http://www.youtube.com/watch?v=uL81hLfMvvw
2ca*_*aos 100
感谢val 指出GPU方面 ...这让我想起了这个CSS-Snippet,它解决了Chrome渲染问题:
-webkit-transform: translateZ(0);
我已将此应用于包含有问题的项目(i.icon-)的容器(div.post),该项目具有分数宽度,问题已解决!
信用:我从这个答案中得到了这个解决方案,以便在导航到页面锚点后修复错误渲染(固定)的元素.
val*_*als 15
我会说它确实是Chrome中的一个错误(我使用的是24.0.1312.57米).
问题不在图像1 + 3上,我在图像2上看到了它.
我认为当图像的宽度为一小部分(比如146.71像素)时会出现问题.在固定显示器中,这将四舍五入到146像素.在转换过程中,这会向上舍入(更正确!)到147像素.
小智 12
使用以下css提示将受影响的元素提升为新的复合图层(它解决了与我完全相同的问题):
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}
这表明合成器将元素的绘制过程分离为新的复合层.在chrome dev工具中检查图层时,您可以确保元素已被提升,然后问题就解决了.该元素将显示在一个新图层中,其中包含以下'合成原因:具有活动的加速动画或过渡.有一个改变合成的暗示.
看起来在以这种方式将元素提升为新图层后,浏览器能够正确呈现转换的最终状态.
伊万.