UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0

Steps to reproduce the problem:
Consider the following examples:

Example 1: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/chrome-bug/
Example 2: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

What is the expected behavior?
Please see Example 1 on other browsers (I checked Firefox (Gecko and Webrender) and Edge).
Hover your mouse over diagram elements.
The grid will not change dimensions/size during this interaction on the page.

Alternatively, see Example 2, which is identical to Example 1, but with a workaround applied, on Chrome and follow the same steps.

What went wrong?
If you open Example 1, the green boxes at the bottom will be split into two lines like this:
> componentDid-     componentDidUpdate      componentWill-
> mount                                     unmount

If the Example 1 does not show the layout as described, the bug has not triggered, try and hard refresh the page.

If you hover over any diagram element on Example 1, the layout will jump unexpectedly, and will take a better measured form, this time consistent to what is displayed on all the other browsers.

As I needed to ship immediately, I have created a workaround which:
-Measures the grid element's width
-Applies the measured width to grid element via CSS
-Removes it to keep the element responsive

You can see the source code at:
https://github.com/wojtekmaj/react-lifecycle-methods-diagram/blob/bf8c66b7c2d80273deaea7ff256e65795194efd4/src/ReactLifecycleMethods.jsx#L7-L21

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: dc3469be277cc962ba01d9c0cb5bb1a265676c36-refs/branch-heads/3325@{#725}  Channel: stable
OS Version: 10.0
Flash Version: 

Other interesting notes:
-If the grid was broken at the moment of soft refreshing the page, it will still be broken after refreshing. If it was "fixed" by hovering before, it will still be "fixed".