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

Example URL:
https://jsfiddle.net/wk7v4txm/1/

Steps to reproduce the problem:
1. Open the link
2. Resize the window until the blue outline of the canvas is either visible or not visible
3. Observe the red "overlay" being positioned differently

What is the expected behavior?
The red overlay should always fill the content of the body since it's position fixed.

What went wrong?
The red overlay get clipped to its parent box if and only if the canvas is actually *visible* on the page; if you scroll or resize the page until you can no longer see the canvas, the overlay behaves as expected.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.103  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 22.0 r0

I created as minimal reproducer as I could, however I've come to a point where toggling nearly any of the remaining CSS properties "fixes" the problem.  Although a sibling element does create a new local coordinate system via `transform`, I don't believe that should affect the element that is `position: fixed` since it's not contained within that subtree, and the behavior differs depending on whether or not the canvas is literally visible on the screen.

Halp?