39

我遇到了这个非常令人沮丧和奇怪的 CSS 问题，我绝对把我所有的头发都扯掉了。

我正在使用Bones 样板制作一个网站，它一直很棒，直到现在......

它使用流体网格系统，我最近尝试创建一个简单的画廊，并将其制成网格（4 张图片，每张图片包含在四分之一列中，第一个/最后一个类添加到第一个/最后一个图像）。

如果您将鼠标悬停在图像上（由于某种原因在前三个图像上尤其明显），您会注意到它们由于某些疯狂的原因而将宽度改变了一两个像素。图像设置为max-width:100%，我觉得这在某种程度上是罪魁祸首，因为如果你给图像一个“固定”宽度（例如.gallery-icon img {max-width:165px;}，它解决了这个问题，但是作为一个流体网格系统，我不能继续下去路线，因为如果调整浏览器大小，图像将保持 165 像素，即使我根据媒体设置了 4 个不同的宽度，在媒体大小之间，图像也不会正确对齐。

如果不是因为transition效果问题（如果我transition关闭，图像会降低opacity，但没有动画），它会像我想要的那样工作:(

请帮助伙计们！

这是一个空的演示站点，其中运行着骨骼样板，仅是页面上的画廊。如果您看到晃动问题，请告诉我。

（我无法在 jsfiddle 上重新创建它，所以我将它安装在一个旧域上，我一直躺在那里，呵呵）

编辑：我刚刚注意到问题似乎发生在宽度和高度都大于 div 的图像上。图像 1 + 3 是这样的，它们有错误，而图像 2,4 似乎还可以？并且图像 2+4 的高度比 div 小.....但是即使我将图像设置为最大高度，问题仍然存在..

EDIT2：添加了一个快速视频来显示问题（最新的 Firefox 和 Chrome）http://www.youtube.com/watch?v=uL81hLfMvvw

4

5 回答 5

101

感谢 vals指出 GPU 方面......这让我想起了这个 CSS-Snippet，它倾向于解决 Chrome 渲染问题：

-webkit-transform: translateZ(0);

我已将此应用于包含有问题的项目 (i.icon-) 的容器 (div.post)，该项目具有小数宽度，问题已解决！

信用：我从这个答案中得到了这个解决方案，在导航到页面锚点后修复错误渲染（固定）的元素。

于 2013-06-27T21:45:32.697 回答
15

我会说这确实是 Chrome 中的一个错误（我使用的是 24.0.1312.57 m）。

问题并不真正在图像 1 + 3 上，我在图像 2 上看到过。

我认为当您将图像的宽度设为分数（例如 146.71 像素）时，就会出现问题。在固定显示中，这会四舍五入为 146 像素。在过渡中，它向上四舍五入（更正确！）到 147 像素。

于 2013-02-24T20:22:41.747 回答
12

使用以下 css 提示将受影响的元素提升到新的复合层（它为我解决了同样的问题）：

.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}

这表明合成器将元素的绘制过程隔离到一个新的合成层中。在 chrome 开发工具中检查层时，您可以确保元素已被提升，从而问题得到解决。该元素将出现在具有以下“合成原因：具有活动的加速动画或过渡”的新图层中。有一个将改变的合成提示。

看起来在以这种方式将元素提升到新层之后，浏览器能够正确呈现过渡的最终状态。

伊万。

于 2015-08-07T22:55:13.927 回答
4

在 Thins链接上，您可以找到 Mozilla 错误的解决方案。

您需要添加 1 个 CSS 规则：

-moz-backface-visibility: hidden;
于 2014-02-17T22:43:25.947 回答
1

我建议使用 jQuery 来处理你的不透明度，而不是使用 CSS3 属性，因为你是正确的，因为你的最大宽度在你的转换中弄乱了，令人不快。 

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

使用 jQuery 将修复许多带有过渡的小故障，并确保您的不透明度更改是跨浏览器兼容的（是的，我知道有很多用于浏览器的过渡标签，但并非所有浏览器都没有属性.) :) 希望有帮助！

于 2013-02-24T20:21:15.937 回答