UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:52.0) Gecko/20100101 Firefox/52.0

Example URL:
http://output.jsbin.com/zorofanamo

Steps to reproduce the problem:
1. Open the example URL
2. Wait for the animation to complete
3. Wait for the transformation to be removed
4. Click (multiple times) anywhere to force rerendering and correct positioning by hiding and showing the elements

What is the expected behavior?
The position of the green boxes should remain relative to the surrounding black container even if the transformation property is reset.

What went wrong?
The container is animated using a css translate transform, the will-change property is set as well. After completion of the animation, the transform property as well as the will-change property are reset to their default values. This causes the elements with position absolute to be positioned incorrectly. Forcing a redraw by hiding and showing the elements (multiple times) restores correct positioning. 

As far as I can tell the issue seems to be related with layer creation and combination, as it is required that the black box is promoted to a separate layer. The issue first occured on one of the websites we are developing. 

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes 57

Does this work in other browsers? Yes

Chrome version: 58.0.3029.110  Channel: stable
OS Version: OS X 10.12
Flash Version: Shockwave Flash 25.0 r0

It does not happen in Chrome 56 or 57. It happens most of the times in Windows 10 Chrome 58.0.3029.110 as well.