Iframes distorted in Safari

Hi,
Can anyone suggest a method of embedding an exterior web page in a touch ui page other than an I frame?
I am currently using iframes in a live app and they are very successful except on iPhones or devices using Safari. The page gets distorted badly.
Thanks
Jonesy
1 person has
this question
+1
Reply
  • Jonesy,

    If you navigate to an external URL without specifying rel="external", the page will be loaded inside the current page as a "virtual page" (much like how Help pages or forms are loaded now). The only other option would be to use an iframe. 
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Thanks Dennis,

    This may help someone else.

    I needed the external website to open inside a COT page so all COT functions and menus were available and bootstrapping worked properly. In other words the external url looks like a part of the application.

    A standard iFrame works on most browsers but NOT on safari.
    The scrolling gets distorted.

    It turns out that to work properly on Safari an iFrame needs to be embedded inside another container with the " -webkit-overflow-scrolling: touch;" property enabled. The iframe itself then needs the "position:relative;" property set.

    So in the page I want to display my external URL in I create a container like this...

    .iframe_container {
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    height: 95%;
    }

    ...then give the iFrame these properties...

    iframe {
    position:relative;
    top: 1%;
    left: 2%;
    border: 0 !important;
    width: 97%;
    height:700px;
    }

    ...the iFrame URL looks like this...

    <div class="iframe_container">
    <iframe id="iframe1" class="animated fadeInUp" src="https://codeontime.com/" frameborder="0">
    </iframe>
    </div>

    It works well in all browsers I've tested including on a Safari iPhone and bootstraps correctly.

    Cheers,
    Jonesy
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Hi Tom.
    First I made a custom page using a jumbotron template with COT settings as below example...


    Then I opened the page in Visual Studio and added the code as per this screenshot...



    Hope this helps.

    Cheers,

    Jonesy
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited