Created attachment 104099 [details] Animation Without Empty Keyframes See the attached test cases. The only difference is that one of them has a duplicated "empty" keyframe rule up to the 50% mark. Notice that the innermost div gets positioned relative to its grandparent when the padding keyframes are present. Since all elements are absolutely positioned, I think the transform: none shouldn't be causing this.
Created attachment 104100 [details] Animation With Empty Keyframes
It's the 50.00% { -webkit-transform: none; } in BannerAppear-2 that causes it. Unfortunately the test case has animation 1 on element 2 and visa-versa :(
Created attachment 104106 [details] Animation With Empty Keyframes Better test. Shows what to change to fix the bug.
Created attachment 104107 [details] Animation Without Empty Keyframes Better test.
The inner animation is not necessary to show the bug
Issue only happens with accelerated compositing enabled. The problem is that "middle-animation" causes #middle to change its stacking context status between keyframes. For some reason, we don't update the layers with the new stacking order until the animation is complete, if only the end keyframe has a transform.
Created attachment 106071 [details] Clearer testcase
We're sending off the keyframes to CA and not doing any work to update style when we hit them. This breaks if the keyframe properties affect z-index.
We don't yet have a code path that runs hardware animations for each keyframe, but resolves style between keyframes, so this is hard to fix at the moment.
Spec will be updated to make this easier: https://lists.w3.org/Archives/Public/www-style/2016Apr/0445.html
I think bug 164094 obsoletes this one. *** This bug has been marked as a duplicate of bug 164094 ***