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

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

. {
will-change: ;}

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.