Unable to reproduce the issue in MacBook Pro (Retina, 15-inch, Mid 2014) using chrome reported version #54.0.2840.98 and latest canary #57.0.2926.0.

Also it is not reproducible in Win-10 and Ubuntu 14.04 by using chrome stable #54.0.2840.100 and latest canary #57.0.2926.0.

Steps followed to reproduce the issue are as follows:
-----------
1. Navigated to the URL: https://jsfiddle.net/76n1Lrbm/ and watched for a few seconds
2. Observed that the div in the center (.nester) was fading in and out as expected.

Attaching screen cast of both chrome and safari for reference.

jhicken@ - Could you please verify both screencasts and please let us know if anything missed from our side.

Thanks...!!

Deleted: 666779_Chrome.mp4 952 KB

	666779_Chrome.mp4 952 KB View Download

Deleted: 666779_Safari.mp4 1.2 MB

	666779_Safari.mp4 1.2 MB View Download

I'm kinda confused about the last comment. The screen cast shows the unexpected behavior. The box (.nester) is not animating. It's jumping from start to end transition states.

The attached gif shows the expected behavior. Where the box (.nester) appears to animate.

https://jsfiddle.net/e23toanp/

Deleted: Nov-21-2016 08-13-58.gif 578 KB

	Nov-21-2016 08-13-58.gif 578 KB View Download

jhicken@ - Thanks for your clarification...!!

Able to reproduce the issue on Mac 10.11.6, windows 10 and Ubuntu 14.04 using chrome reported version #54.0.2840.98 and latest canary #57.0.2926.0.

This is a non regression issue as it is observed from M30 old builds.

Hence, Marking it as untriaged to get more inputs from dev team.

Thanks...!!

Not related to JavaScript/V8.

For clarity, in the attached test case the .wrapper and .fullBackdrop divs sit in front of the .nester div, which is completely static. The opacity of .wrapper animates between 0 and 1, but instead of this opacity change impacting .nester during animation, it only impacts at the start and end of each animation. So .nester appears to 'pop' from white to grey even though there's a div with smoothly animating opacity that is occluding it.

https://jsfiddle.net/76n1Lrbm/2/ may make this clearer. At any rate, this seems to be a paint bug, maybe something to do with layer creation and paint order?

Is this another case of the confusing spec behavior related to stacking contexts and opacity?

If an element has opacity < 1, it creates a stacking context.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Therefore, the "wrapper" element creates a stacking context for any animation frame
other than the end, when opacity == 1. In such cases, the "wrapper", "fullBackdrop" and "nester" divs
all participate in the same stacking context. This means that they are sorted in paint order according
to their z-index values. Since "fullBackdrop" has z-index 100, it paints on top, which is why the white
is under the black-with-0.5-opacity of "fullBackdrop".

Paint order:

1. wrapper
2. nester
3. fullBackdrop

When opacity < 1 on "wrapper", "fullBackdrop" now participates in the stacking context of "wrapper",
which means that no matter what z-index it gets, it sorts only with itself and is painted along with "wrapper".

Paint order:

1. wrapper box decorations
2. fullBackdrop
3. wrapper end (apply opacity to stacking context children)
3. nester

You can fix this in your demo by always having "wrapper" be a stacking context, if that is desired. This
can be achieved by putting isolation: isolate on it, or perhaps by animating to 0.9999 opacity instead of
1.

Note that Firefox and Safari have the same behavior as Chrome, and all are correct according to spec.