Chrome not displaying iframe and/or transition properly

I have a little project that works fine in safari and firefox, but not in chrome. It's one of my first projects developing for the web so still very fresh. I have made a couple of gifs that will save me a lot of explaining.

This is working properly in safari:

But this is what happens in chrome:

So this is not working as intended. My first thought was that it could be an issue with iframe and chrome, but the files are running on a local server so as far as I understand, it shouldn't be an issue. The text is not being pushed down, so that is confusing to me as it indicates that the css is not being interpreted properly? As I said, I am still new to this and this is the first time I test a project in different browsers so not sure how specific to my project this issue could be. Any help much appreciated. P

Here is the full code needed in order to reproduce the problem. Please keep in mind that chrome won't properly play the iframe unless you run a local server. It's up to you if you want to do that. The layout problem that I am getting is not related to the iframe playing or not.