Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue when used inside of iframe in Mobile Safari #10

Open
maddox opened this issue Apr 25, 2019 · 0 comments
Open

Issue when used inside of iframe in Mobile Safari #10

maddox opened this issue Apr 25, 2019 · 0 comments

Comments

@maddox
Copy link

maddox commented Apr 25, 2019

I have a page iframed into another page. The iframe is set to be full width and height of the page. In this page I'm using this to show a modal. This works fine on desktop browsers, but in Mobile Safari the results are a bit off.

It appears that the modal can't figure out the height of the page. No matter what I do, I can't get the modal to show at the current viewport or even fixed to the top.

Here's a short example to see it work by iframing the Bulma Modal FX page. Load this on Mobile Safari and you can see the weird results.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Modal in Frame</title>

    <style media="screen">
      body, html{
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

      #frame{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <iframe id="frame" src="https://postare.github.io/bulma-modal-fx/" width="100%" height="100%" frameborder="0"></iframe>
  </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@maddox