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

Steps to reproduce the problem:
1. Go to https://codepen.io/julamb/details/yoBLwQ/
2. Note that the transitions between colors are blury.
3. Click the "change view" button in the top right corner, transitions become sharp!

What is the expected behavior?

What went wrong?
The transition should be sharp from the beginning (as they are in Firefox or Safari). Also, I can't understand why interacting with the main page would modify the rendering of the SVG that is in a iFrame. 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 59.0.3071.115  Channel: stable
OS Version: OS X 10.12.5
Flash Version: 

Let me know if additional information is needed.