很难解决和奇怪的css3不透明过渡问题（...必须是一个错误？） [英] Very difficult to solve and strange css3 opacity transition issue (...must be a bug?)
问题描述
我使用的是 Bones样板来创建一个网站，它一直很棒，直到现在...
它使用流体网格系统，我最近试图创建一个简单的画廊，我已经做成一个网格（4个图像，每个包装在一个季度列，第一/最后一类添加到第一/最后的图像）。
如果你将鼠标悬停在图像上（特别是由于某些原因，特别注意到前三个图像），你会注意到，由于一些疯狂的原因，他们将宽度改变一个像素或两个像素。图像设置为最大宽度：100％，我有一种感觉这是某种原因的罪魁祸首，因为如果你给图像一个固定的宽度（例如.gallery-icon img {max-width：165px;}，它修复了问题，但是作为一个流体网格系统，我不能沿着那条路线，因为如果调整浏览器的大小，图像保持165px，即使我设置4不同的宽度取决于媒体，在媒体大小之间，图像
如果不是为了过渡效果问题（如果我关闭过渡，图像降低不透明度，但没有动画）它会工作，我希望它工作：（
请帮助家伙！
网站上的骨头样板运行，没有什么比页面上的画廊。让我知道，如果你看到摇晃的问题。
（我无法重新创建它jsfiddle，所以我安装在一个旧域上我躺在熙熙攘攘）
编辑：我刚刚注意到，问题似乎发生在图像大于div在宽度和高度。图片1 + 3是这个，他们有错误，而图像2,4似乎是好吗？图像2 + 4的高度比div小...但即使我设置图像的最大高度，问题仍然存在。
EDIT2 ：添加了一个快速视频来显示问题（最新的Firefox和Chrome） http://www.youtube.com/watch?v = uL81hLfMvvw
我会说这是一个真正的Chrome的错误（我使用24.0.1312.57 m ）。
问题并不在于图片1 + 3，我在图片2上看到过。
我认为这个问题出现的时候，你的图像的宽度是一个分数（说146.71像素）。在固定显示中，这将舍入到146像素。在转换中，这将向上舍入（更正确！）到147 px。
I am absolutely tearing all of my hair out with this highly frustrating and strange css problem I am having.
I am using the Bones boilerplate to make a website, and it has been great, until now...
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).
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.
If it wasn't for the transition effect problem (if i turn the transition off, the images lower opacity fine, but no animation), it would work as I want it to work :(
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)
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..
EDIT2: Added a quick video to show the problem (latest firefox and chrome) http://www.youtube.com/watch?v=uL81hLfMvvw
I would say that it is really a bug in Chrome (I am using 24.0.1312.57 m).
The issue is not really on images 1 + 3, I have seen it on image number 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.
这篇关于很难解决和奇怪的css3不透明过渡问题（...必须是一个错误？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
