fix(playground): use visibility hidden to hide iframe for proper loading

[brandyscarney]

While working on #2622 I noticed that the fullscreen property would only apply to the first iframe that gets loaded, so usually ios only and not md. This can be reproduced on the live documentation too.

Steps to reproduce:

1. Go to https://ionicframework.com/docs/api/footer#translucent-footer
2. Scroll down in the demo on ios mode, you'll see the footer is translucent and content is behind it.
3. Switch to md mode, scroll to the very bottom and you'll see the scrollbar ends above the footer. This should be behind the footer.

An easier way to see it is by running the documentation locally on main and adding the following CSS to the test at static/usage/footer/translucent/demo.html:

<style>
  ion-content {
    --background: red;
  }

  ion-toolbar {
    --opacity: .5;
  }
</style>

Then when you view the test at http://localhost:3000/docs/api/footer#translucent-footer, you will be able to switch between the modes and see that the red from the content is not behind the toolbar. If you change the mode then click the Reset Demo icon on the playground, you will see the toolbar is properly transparent.

This bug is caused by the iframe being set to display: none when the content does the fullscreen calculations. In order to fix it I have changed the iframe to visibility: hidden and also set the width to 0 so it doesn't take up any space.

I don't know what this CSS was there for but it adds a horizontal scroll in ios mode if I leave it in:

.playground .frame-visible {
  width: 100%;
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ionic-docs	✅ Ready (Inspect)	Visit Preview	Oct 25, 2022 at 6:45PM (UTC)

[averyjohnston]

I was also able to replicate the issue by reloading the iframes when on md mode, then switching back to ios, which is now borked (which makes it more obvious that there's actually a problem and it's not just md behavior): https://user-images.githubusercontent.com/90629384/198069660-684407ac-4c72-43ac-b8b5-50f532079a54.mp4 This doesn't happen on the branch preview, of course.