Sticky header clashes with iframes

  • 18 September 2015
  • 4 replies
  • 13 views
A

I am using the sticky header script/method provided in:

/topics/creating_a_fixed_header_menu

I created a box that sticks to the top where I put content using an iframe. 

The box stays at the top (good) as it should but the iframe is not showing ONLY on iphone browsers (in mobile view). Android phones are showing it fine. Anyone has any clue what would cause an iframe to not show? 

4 replies

J

Hey Amir! 
Good question. I’m not entirely sure why it wouldn’t be showing on iphone (mobile). Can you post a link to the page? If not, would you be able to email us with a direct link to the page? We’d love to dive into this if you’re still struggling to get this working. 
Cheers, 

Joe

^ Justin to the rescue!  Amir, welcome to the community and you are in good hands.

Best,

Joe

A

Thank you Justin.

I gave up on it in production but re-created it in a testing environment: http://go.jewcer.com/test1/

If you go to the page on a desktop browser, the header is showing great (and sticky to the top). The actual header is at go.jewcer.com/header 

However, if you go to the page on an iphone, the header is blank. When you go on an Android device, the header is showing. 

If you disable the “sticky header” script, the header is showing again…

I have to say though, this issue was a small part of the reason I gave up on building the minisite like this. The bigger reason was that this is a workaround to the fact unbounce does not allow to share sections between pages which means that if someone views the page, I get “charged” multiple views (as part of my pre-paid package) which I think its somewhat unfair. 

J

Hi Amir, 
Thanks for giving some more details on this one. I can confirm that the issue is indeed happening on iOS devices, and it looks like it’s caused by the combination of the script and the iframe. We’re not exactly sure where the issue is, but apple devices are known to be a bit wonky when it comes to iframes. 

As a landing page builder, we’re not quite optimized for a site building feature such as shared assets - and there’s not really any way to get around the traffic limit if you’re loading two pages at once. I would recommend voting on this idea if you haven’t already, since this is one of the fastest ways to get a requested feature on to our radar. 

While we don’t have any form of shared asset library in place just yet, do you think it would be possible to just build this header once and replicate it on your pages by using our super charged copy and paste? I know it’s not exactly the easiest solution, but it will save you lots of time compared to rebuilding it all each time. 

Reply


Terms & ConditionsCookie settings