Fix iframe-positioning problem with frameMagic.js

A short followup on my previous post about iframes; as I happen to like simple drop-in solutions, I updated the javascript that handles the ‘blank 2nd page in an iframe bug’ to automagically work upon inclusion in the html.

So if you happen to have problems with the positioning of 2nd (or later) pages in iframes (due to the top part of the iframe not being visible in the ‘viewport’), just upload frameMagic.js to your webserver and add the following to the head of your html to ease your iframe-blues;

Optionally you can specify which iframes are to be treated this way (excluding the other ones) by doing

You can find more information and examples on

7 thoughts on “Fix iframe-positioning problem with frameMagic.js

  1. Josette

    You are a hero!! This is the only thing that has worked for me and brought my project to fruition

  2. Jerri

    Hi Frank
    Well after 6 or 7 hours of looking for a fix – we have an iframe and it has two pages within the frame and the first page is longer than the second, I finally found your elegant and oh so easy fix! Brilliantly simple and does the job.
    If anybody is looking for iframe help, iframe reload page automatically (Tag!) etc this is worth a first try.
    Thank you very much for your kind contribution to the world wide web!

  3. Jerri

    Found this to make it responsive


    .myIframe {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: auto;
    -webkit-overflow-scrolling:touch; //<<— THIS IS THE KEY
    border: solid black 1px;
    .myIframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


Leave a Reply to Rachel Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.