UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Example URL:
https://jsfiddle.net/hkjb10ha/

Steps to reproduce the problem:
1. Create parent element containing two or more children.
2. Set position of children to `relative` or `absolute`.
3. Create keyframe animation for parent using `transform: rotate()` function.
4. Assign animation properties to parent element. Set `animation-delay` in order to observe layout issue. Additionally, set `animation-length` to arbitrary value along with `animation-name` to match the name given to the keyframe-animation.

What is the expected behavior?
Layout of child-elements should match expected layout upon page load.

What went wrong?
Child-elements do match match expected layout.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes Up until version 53.0.2785.116

Does this work in other browsers? Yes 

Chrome version: 53.0.2785.116  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 23.0 r0

<style>
@keyframes shake {
    50% {
        transform: rotate(-5deg);
    }
}

.child {
    position: relative;
}

#parent {
    animation-delay: 5s;
    animation-duration: 1s;
    animation-name: shake;
}
</style>
<!--Initial loading of the page in Chrome 53 improperly aligns `Child 1` until the animation begins.-->
<!--If #parent has a matching `transform: rotate(0deg);` definition, alignment is correct.-->
<div id="parent">
        <span class="child">{Child 0}</span>
        <span class="child">{Child 1}</span>
</div>
 

Deleted: chrome-53-layout-issue.gif 55.8 KB

	chrome-53-layout-issue.gif 55.8 KB View Download