1

I tested my website application on both my iOS devices and my Windows PC, along with the Google Chrome device toolbar. Any fixed elements inside the iFrame are fixed when using the website application on my Windows PC and Google Chrome device toolbar. However, any fixed elements inside the iFrame are not fixed on iOS devices. Apparently this could be a bug that iOS devices have and was wondering if there is a solution so that elements that are suppose to be in a fixed position are actually fixed on iOS devices. Here is the CSS code I have:

/* Div that contains the iFrame */
#interactWithNav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    display: table;
    text-align: center;
}

/* iFrame that loads the page with the fixed elements */
#interactWithNavFrame {
    border: 0;
    width: 100%;
    height: 100%;
}
userrandomuser
  • 103
  • 1
  • 1
  • 8
  • Just to make sure we're clear - the fixed position item will be fixed within the iframe - and will not be fixed to the parent page scope, no matter what you do. – sheriffderek Mar 27 '17 at 20:05
  • So it would be like this image https://i.stack.imgur.com/624Q6.png but except working in an iFrame. – userrandomuser Mar 27 '17 at 20:14

1 Answers1

0

If it were me, I would create a targeted test to prove these theories and show them.

I'd make a mini website with a fixed position element, and an absolute element (for good measure)

http://codepen.io/sheriffderek/pen/xqaYqM

Then I would make another mini website with an iframe of the source of that previous website example(in this case the debug CodePen version) http://s.codepen.io/sheriffderek/debug/xqaYqM

http://codepen.io/sheriffderek/pen/GWXQBN

Send this link to your phone: http://s.codepen.io/sheriffderek/debug/GWXQBN

Then I'd use the debug version of that to test on the iPhone or whatever.

<header>
    <h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
    header.... 

    <div class='fixed-thing'>fixed-thing</div>
</header>

<main>
    main

    <div class='absolute-thing'>absolute-thing</div>
</main>

and then... 

<main>
    <iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>

Everything seems normal to me.

Can this help you explain the issue a bit more? Are you using any transform: translate in your code? Why are you positioning the iframe in an absolute container?

It appears that the iFrame is automatically full height on iOS no matter what you set it to, so no scrolling, which means fixed wouldn't even be detectable... See this thread: How to get an IFrame to be responsive in iOS Safari?

Community
  • 1
  • 1
sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • Ah, I see what you mean now. Let me adjust... the iframe is not overflow scrolling... – sheriffderek Mar 27 '17 at 19:56
  • I tried the link on my iPhone and it's still producing the same result, where the fixed elements are staying absolute. Here are the images of without and with the iFrame: https://i.stack.imgur.com/624Q6.png https://i.stack.imgur.com/EJ1Rh.png I'm only using transform: translate for elements that do not relate to the iFrame. Due to me developing the foundation of it a few months ago, I think I did that to ensure the iFrame would take the entire screen up, as well as ensuring that users can only interact with the iFrame when required. – userrandomuser Mar 27 '17 at 19:56
  • Wasn't sure if my last comment went through or not. Apologies for that. – userrandomuser Mar 27 '17 at 19:57
  • That's what I did until it said you cannot edit comments that have been made longer than 5 minutes or something like that. – userrandomuser Mar 27 '17 at 20:04
  • Didn't realise you made an edit on your post there. I looked at the thread and implemented the following into the content that is accessed through the iFrame: `body { width: 100%; overflow: scroll; }`. However, it had no effect on making the fixed element fixed. – userrandomuser Mar 28 '17 at 19:05
  • Yeah... I'm not sure what to do. I never use iframes for anything... but just now I'm thinking you should set the height directly on the element in the html - because all sorts of API widgets use iframes... and they maintain shape... – sheriffderek Mar 28 '17 at 22:51
  • Yeah its for this data collection app that I am building, which tests navigation styles, but for some reason, viewing fixed elements inside an iFrame makes those fixed elements absolute, as shown in the images. I might just have to leave it as it is and if users need to access the navigation, then they will just have to scroll to the top of the page that they are on within the iFrame. – userrandomuser Mar 29 '17 at 14:19