Html 很难解决和奇怪的 CSS3 不透明度过渡问题（......一定是一个错误？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15051557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Very difficult to solve and strange CSS3 opacity transition issue (...must be a bug?)
提问by user1202292
I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having.
我遇到了这个非常令人沮丧和奇怪的 CSS 问题，我绝对把我所有的头发都撕掉了。
I am using the Bones boilerplateto make a website, and it has been great, until now...
我正在使用Bones 样板制作一个网站，它一直很棒，直到现在......
It uses fluid grid system and I have recently tried to create a simple gallery which I have made into a grid (4 images, each one wrapped in a quarter column, with first/last classes added to the first/last images).
它使用流体网格系统，我最近尝试创建一个简单的画廊，我将其制作成一个网格（4 张图像，每个图像都包裹在四分之一列中，第一个/最后一个类添加到第一个/最后一个图像中）。
If you hover over the images (especially noticeable on the first three for some reason), you will notice that they change width by a pixel or two for some crazy reason. The images are set to max-width:100%, and I have a feeling this is somehow the culprit, because if you give the images a "fixed" width (example .gallery-icon img {max-width:165px;}, it fixes the issue, but being a fluid grid system, I can't go down that route, as the images stay 165px if resizing the browser, and even if I set 4 different widths depending on media, in between media sizes, the images wouldn't align properly.
如果您将鼠标悬停在图像上（由于某种原因在前三个上特别明显），您会注意到它们由于某种疯狂的原因改变了一个或两个像素的宽度。图像设置为max-width:100%，我觉得这在某种程度上是罪魁祸首，因为如果你给图像一个“固定”的宽度（例如.gallery-icon img {max-width:165px;}，它解决了这个问题，但作为一个流体网格系统，我不能说路线，因为如果调整浏览器大小，图像将保持 165 像素，即使我根据媒体设置了 4 个不同的宽度，在媒体大小之间，图像也不会正确对齐。
If it wasn't for the transitioneffect problem (if i turn the transitionoff, the images lower opacityfine, but no animation), it would work as I want it to work :(
如果不是因为transition效果问题（如果我transition关闭，图像会降低opacity，但没有动画），它会按我希望的那样工作:(
Please help guys!
请帮助伙计们！
Here is a empty demo site that has the bones boilerplate running and nothing more than the gallery on the page. Let me know if you see the shaking issue.
这是一个空的演示站点，它运行着骨骼样板，而页面上只有画廊。如果您看到抖动问题，请告诉我。
(I couldn't recreate it on jsfiddle, so I installed it on an old domain I had lying around hehe)
（我无法在 jsfiddle 上重新创建它，所以我将它安装在我周围的旧域上，呵呵）
EDIT: I have just noticed that the problem seems to happen to images that are bigger than the div in both width and height. Images 1 + 3 are this and they have the bug, whereas images 2,4 seem to be okay? and images 2+4 have a smaller height than the div..... But even if I set the images a max-height, the problem continues..
编辑：我刚刚注意到问题似乎发生在宽度和高度都大于 div 的图像上。图片 1 + 3 是这个，它们有错误，而图片 2,4 似乎没问题？并且图像 2+4 的高度比 div 小..... 但即使我将图像设置为最大高度，问题仍然存在..
EDIT2: Added a quick video to show the problem (latest Firefox and Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw
EDIT2：添加了一个快速视频来显示问题（最新的 Firefox 和 Chrome）http://www.youtube.com/watch?v=uL81hLfMvvw
采纳答案by vals
I would say that it is really a bug in Chrome (I am using 24.0.1312.57 m).
我会说这确实是 Chrome 中的一个错误（我使用的是 24.0.1312.57 m）。
The issue is not really on images 1 + 3, I have seen it on image number 2.
问题并不真正出现在图像 1 + 3 上，我在图像 2 上看到过。
I think that the issue arises when you have the width of the image being a fraction (say 146.71 px). In stationary display, this gets rounded to 146 px. In the transition this gets rounded upwards (more correctly !) to 147 px.
我认为当您将图像的宽度设为一小部分（例如 146.71 像素）时，就会出现问题。在固定显示中，它被四舍五入为 146 像素。在过渡中，它向上舍入（更正确！）到 147 像素。
回答by 2called-chaos
Thanks to vals for pointing out the GPU aspect... This reminded me of this CSS-Snippet which tends to solve Chrome rendering issues:
感谢 vals指出 GPU 方面......这让我想起了这个 CSS-Snippet，它倾向于解决 Chrome 渲染问题：
-webkit-transform: translateZ(0);
I've applied this to the container (div.post) containing the problematic item (i.icon-) which has a fraction width, problem solved!
我已将此应用到包含有问题的项目 (i.icon-) 的容器 (div.post) 中，该项目具有分数宽度，问题解决了！
Credit: I've got this solution from this answerto fix incorrectly rendered (fixed) elements after navigating to an page anchor.
信用：我从这个答案中得到了这个解决方案，用于在导航到页面锚点后修复错误呈现（固定）的元素。
回答by isaldarriaga
use the following css hint to promote the affected element to a new composite layer (It solved the same exact issue to me):
使用以下 css 提示将受影响的元素提升到新的复合层（它对我解决了同样的问题）：
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}
This indicate the compositor to isolate the paint process of the element into a new composite layer. When inspecting layers in chrome dev tools you can make sure the element has been promoted, and thence the issue solved. The element will appear in a new layer with the following 'Compositing reasons: has an active accelerated animation or transition. Has a will-change compositing hint.'
这表明合成器将元素的绘制过程隔离到一个新的合成层中。在 chrome 开发工具中检查图层时，您可以确保元素已升级，然后问题就解决了。该元素将出现在具有以下“合成原因：具有活动加速动画或过渡”的新图层中。有一个会改变的合成提示。
Looks like after promoting the element to a new layer this way, the browser is able to render the final state of the transition correctly.
看起来在以这种方式将元素提升到新层后，浏览器能够正确呈现过渡的最终状态。
Ivan.
伊万。
回答by Mr Br
回答by Tammy Shipps
I suggest using jQuery to handle your opacity rather than using the CSS3 attributes because you are correct in that your max-width is messing, unhappily, with your transitions.
我建议使用 jQuery 来处理您的不透明度，而不是使用 CSS3 属性，因为您是正确的，因为您的 max-width 与您的过渡混乱，令人不快。
$(".gallery-icon img").hover(function(){
$(this).fadeTo(fast, 0.7);
}, function(){
$(this).fadeTo(fast, 1.0);
});
Using jQuery will fix a lot of these little glitches with transitions and make sure your opacity change is done cross-browser-compatibly (yes, I know that there are lots of tags for transitions for browsers, but there aren't attributes for all browsers.) :) Hope that helps!
使用 jQuery 将修复很多这些带有过渡的小故障，并确保您的不透明度更改是跨浏览器兼容的（是的，我知道有很多用于浏览器的过渡标签，但并不是所有浏览器都有属性.) :) 希望有帮助！
