It’s very difficult to solve the strange CSS3 opacity transition problem (... should there be an error?)

Question

I completely ripped all my hair off with this very frustrating and weird CSS issue that I am experiencing.

I use the Bones templateplate to make a website, and it was great so far ...

It uses a fluid grid system, and I recently tried to create a simple gallery that I made into a grid (4 images, each of which is wrapped in a quarter of a column, with the first / last classes added to the first / last images).

If you hover over images (especially noticeable in the first three for some reason), you will notice that they change the width by a pixel or two for some crazy reason. Images are set to max-width:100% , and I feel like it's somehow the culprit, because if you give the images a “fixed” width (example .gallery-icon img {max-width:165px;} , it fixes a problem, but being a liquid grid, I can’t go down this route, because when I change the browser size the image will remain 165 pixels, and even if I set 4 different widths depending on the media, between the sizes of the media, the images will not align correctly.

If it weren’t for the transition effect (if I turn off transition , the images below opacity are fine, but without animation), it will work the way I want it to work: (

Please help the guys!

Here is an empty demo site that runs code coding, and nothing more than a gallery on the page. Let me know if you see a shaking problem.

(I could not recreate it on jsfiddle, so I installed it on the old domain where I was lying, hehe)

EDIT: I just noticed that the problem seems to be happening with images that are larger than the div in both width and height. 1 + 3 images is this and they have an error, while 2.4 images seem to be in order? and 2 + 4 images have a lower height than the div ..... But even if I set the max-height images, the problem will continue.

EDIT2: Added a quick video to show the problem (latest versions of Firefox and Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw

Answer 1

I would say that this is really a bug in Chrome (I use 24.0.1312.57 m).

The problem is actually not in images 1 + 3, I saw them in image No. 2.

I think the problem arises when the image width is a fraction (say 146.71 px). In a stationary display, this is rounded to 146 pixels. Upon transition, this is rounded up (or rather!) To 147 pixels.

Answer 2

Thanks to vals for pointing out the GPU aspect ... It reminded me of this CSS snippet that tends to solve Chrome rendering problems:

 -webkit-transform: translateZ(0); 

I applied this to a container (div.post) containing a problem element (i.icon-) that has a share width, the problem is solved!

Credit: I have this solution from this answer to fix incorrectly displayed (fixed) elements after going to the page link.

Answer 3

use the following css hint to push the affected element to a new composite layer (it solved the same problem for me):

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

This means that the composer isolates the process of drawing the element into a new composite layer. When checking layers in chrome dev tools, you can make sure that the element has been advanced, and then the problem is solved. The element will appear in a new layer with the following "Compilation" reasons: it has an active accelerated animation or transition. Has a hint for changing the composition.

It seems that after moving the element to a new layer in this way, the browser will be able to correctly display the final state of the transition.

Ivan

Answer 4

In thins you can find a solution for Mozilla error.

You need to add a CSS rule:

 -moz-backface-visibility: hidden; 

Answer 5

I suggest using jQuery to handle your opacity, and not to use CSS3 attributes, because you're right that your maximum width is useless, with a transition.

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

Using jQuery will fix many of these small transition failures and make sure that the opacity has been changed using a cross browser (yes, I know that there are many transition tags for browsers, but no attributes for all browsers.) :) I hope that it will help!