Very difficult to solve and strange CSS3 opacity transition issue (…must be a bug?)

Question

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

Answer 1

On thins link you can find solution for Mozilla bug.

You need to add 1 CSS rule:

-moz-backface-visibility: hidden;

Answer 2

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.

$(".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!

Answer 3

use the following css hint to promote the affected element to a new composite layer (It solved the same exact issue to me):

.<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.'

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.

Answer 4

Thanks to vals for pointing out the GPU aspect... This reminded me of this CSS-Snippet which tends to solve Chrome rendering issues:

-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!

Credit: I've got this solution from this answer to fix incorrectly rendered (fixed) elements after navigating to an page anchor.

Answer 5

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.