1

I have a page with a fixed div which is displayed at bottom of screen. When I put that page in iframe it has no issues while viewing in desktop

On desktop the yellow bar is coming at bottom without any issues: https://jsfiddle.net/x1p4bf7j/12/

<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/"  />

but on iPad it doesn't the text just doesn't fit inside iframe. Below is the text how it is displayed in iPadenter image description here

As you can see in the image there is no sticky footer coming. I want that to be at the bottom of my iPad.

enter image description here

Raghav
  • 8,772
  • 6
  • 82
  • 106

1 Answers1

1

The issue is how mobile safari renders iframes. It doesn't respect a height attribute, preferring to set the height of your iframe based on the height of your content. Personally, it makes sense when you think about how earlier versions of IOS handled overflowed scrolling (two finger scrolling) - Imagine an iframe that ALSO contained a scrollable element!

(A related stackoverflow here: iframe size with CSS on iOS)

Anyway, your "fixed" footer IS fixed - just at the bottom of a very large iframe.

Community
  • 1
  • 1
Jack
  • 9,151
  • 2
  • 32
  • 44
  • Jack, I followed the post you mentioned and came to this https://jsfiddle.net/x1p4bf7j/15/ I am facing the same issue. The sticky div is still not coming at the bottom of iPad screen. I have to scroll to bottom of iframe to view the sticky div. – Raghav Mar 27 '15 at 10:00
  • Hi @RaghavKhunger - Unfortunately, the issue will still persist as long as the sticky div is contained within your footer. The outer div workaround only allows you to apply "overflow" to an iframe. The iframe's height is still 100% and the `fixed` footer will continue to act "quirky" on iPads for that reason. – Jack Mar 27 '15 at 18:58