Example URL:
http://jsbin.com/lazuviq/5

Steps to reproduce the problem:
1. Go to the URL listed in a desktop version of Chrome 56, and note the position of the dark header, aligned with the left edge of the window
2. Go to the URL listed in the Android version of Chrome 56
3. Note that the dark header has been pushed to the right by the width of #bar.
4. Note that the dark header has been pushed even farther to the right and towards the bottom by the box-shadow of #bar (box-shadow should have no effect on layout).
5. Turn off the box shadow (using dev tools or jsbin features) and see it affect the layout.
6. Change the position of the header from 'sticky' to 'relative' to see the correct position (before scrolling).

What is the expected behavior?
Unscrolled, everything should look the same as if the header had 'position:relative'. #bar should be mostly off-screen on the left. Plus, the red shadow should not affect the position of anything else.

What went wrong?
Both the shadow and the position of the abs-pos descendant are adversely affecting the position of the header element, on Android Chrome only. This is destroying layouts that work fine in Safari.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes 55, I think

Does this work in other browsers? Yes

Chrome version: 56.0.2924.87  Channel: stable
OS Version: 7.1
Flash Version: 

When I say it worked before, I mean it wasn't an issue before, because Chrome didn't have position:sticky before, and feature-testing it in JavaScript didn't result in broken layouts.