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

Steps to reproduce the problem:
1. Create two images next to each other.
2. Overlay one over the other one (by negative margin on transform).
3. Apply border to images.
4. Set the display property for images to block|flex|grid|table.

What is the expected behavior?
I would expect render in following order:

1. Border of image underneath.
2. Image underneath.
3. Border or fron image.
4. Front image.

What went wrong?
Rendering order is broken:

I would expect render in following order:

1. Border of image underneath.
2. Border or fron image.
3. Image underneath.
4. Front image.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 63.0.3239.84  Channel: stable
OS Version: OS X 10.13.2
Flash Version: 

I recreated issue in few lines of css.
https://codepen.io/pawelgrzybek/pen/RxwKWw

Please play around with display (block vs inline)