UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36

Steps to reproduce the problem:
View this codepen:
https://codepen.io/telekid/pen/NgbamJ?editors=1100

What is the expected behavior?
Element A is nested in Element B.
Element B is nested in Element C.

If Element A's 'position' property is set to sticky, and
Element B's 'overflow' property is set to scroll, and
Element B's content overflows, and
Element C's 'transform' property is set to 'translateX(30px)',
then the left edge of Element A should be 30px from the left edge of the document root, and in line with the left edge of Element B.

What went wrong?
The left edge of Element A is positioned 60px from the left edge of the document root, and 30px from the left edge of Element B.

As a rule, the left edge of Element A will always be 2x farther from the left edge of Element B than expected behavior would dictate.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 59.0.3071.104  Channel: stable
OS Version: OS X 10.12.4
Flash Version: 

As a workaround, developers can set the opacity of Element B to any value other than 1. (See the commented-out statement on line 27 of the attached CodePen for an example workaround.)