Chrome Version       : 55.0.2883.95
OS Version: OS X 10.10.5

What steps will reproduce the problem?
1. Use a macbook retina display
2. React changes className & innerHTML on span element triggering a CSS transition.

What is the expected result?

Old span innerHTML should no longer be rendered.

What happens instead of that?

Old innerHTML content remains painted until a repaint is forced by resizing the window, or toggling the CSS attributes in the debugger.


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

I'm sorry about repro steps being pretty light. I'm having a hard time creating a minimal repro without sharing our entire app, which I can't really do.

Here is a gif of the problem drawing. https://cl.ly/1j2S3h03201f/Screen%20Recording%202017-01-11%20at%2006.45%20PM.gif
The span contents at the end of the gif in the debugger are 'All Changes Saved' but once the transition fades that out the 'Saving...' text is still left.

The debugger shows this as the CSS, the 'saved' className is added when the content changes to 'All Changes Saved', but this doesn't seem enough to repro.

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 8px 12px;
    line-height: 1.25;
    font-weight: 400;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.8rem;
    color: #757575;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
    opacity: 1;
}

.content.saved {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in-out 2s;
  transition: opacity 2s ease-in-out 2s;
}

Additional interesting facts:
- When you drag the chrome window off screen onto an attached monitor the problem goes away.
- After reading this article http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/ I added the transform: translate3d(0,0,0); CSS property to the span in question and the issue went away.
- Resizing the window sometimes seemed to suppress the issue.
- React is managing the DOM element modification/replacement.
- Removing the transition CSS property also seems to eliminate the issue.

We think the regression was in the last month or two, but I don't have an exact pin point. I hope that is at least enough details for someone to get pointed in the right direction.

UserAgentString: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36