fix(playground): use visibility hidden to hide iframe for proper loading #2623
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
While working on #2622 I noticed that the
fullscreen
property would only apply to the first iframe that gets loaded, so usuallyios
only and notmd
. This can be reproduced on the live documentation too.Steps to reproduce:
ios
mode, you'll see the footer is translucent and content is behind it.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 atstatic/usage/footer/translucent/demo.html
: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 todisplay: none
when the content does thefullscreen
calculations. In order to fix it I have changed the iframe tovisibility: hidden
and also set the width to0
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: