Chrome Version       : 56

What steps will reproduce the problem?
(1) add position: sticky; to an element and position to desired location.
(2) add a box-shadow property to the now sticky element


What is the expected result?
Element follows the sticky rules and a shadow appears.

What happens instead?
Element will shift it's visual location based on the box-shadow coords. E.G. box-shadow: 3px 5px 7px red; will make the element VISUALLY look 3px the right, 5px below where it is supposed to be positioned.

Inspecting the DOM shows the element is in the correct position, but is being rendered incorrectly. Somewhat of a similar affect to using css3 transform to render in a different location.

However, If the sticky element is the last element in the body, it renderers correctly (not tested thoroughly)


Please provide any additional information below. Attach a screenshot if
possible.