One completely unrelated thing. On Chrome 68.0.3440.84, I noticed the large icons (particularly the Kubernetes one) looked "weird", with jagged edges that didn't make any sense. Some poking with the devtools revealed that 'backface-visibility: hidden' seems to be disabling antialiasing.
Suggest opening the following in new tabs so you can flip back and forth between them:
- As is right now: https://i.imgur.com/nYzsukI.jpg
- Nicer-looking: https://i.imgur.com/GNlvx7Z.jpg
I noticed disabling this has an effect on the animation at the top (the edges of the moving webpage slides don't have constantly-moving jaggies).
There may well be a valid reason you have this enabled, perhaps for added performance. Or perhaps React added it in for you? :P
And you can repro :) cool. Makes a lot of sense you can't see it on retina.
Interesting FF bug you hit. CSS3 GPU-accelerated animations are incredibly complex... heh, adding the rule fixed Firefox ~57, but now Chrome 68 is glitching out because the rule is there. I wonder if Google realizes yet. Ponders complexity of creating minimal testcase, versus waiting for someone else to notice :P