Top of modal within iframe isn't in view when modal is shown on iOS

[psukmak]

os: IOS 9.3.3
Browser: Chrome , Safari, Firefox
Mobile : iphone 5, 6
Bootstrap : v4.0.0-alpha.2

On first image, I have form put into iframe.
On second imag,I have change location button that put into middle of the form above. when click will show modal.
...............................

On nexus 5 android version 6.0.1

• When click change location button, it shows perfect. Header of modal show first.
• Form behide of modal cannot scroll
  

On Iphone 5

• When click change location button, it will show not right. Header of modal not show first. It relates to height of the iframe.
• Form behide of modal can scroll
• When show modal it will be put modal-open class into body in the iframe and modal-open class is overflow: hidden; but this css not working on iphone

[cvrebert]

On nexus 5 android version 6.0.1

Please open a separate issue for that. Much appreciated.

[cvrebert]

Also, we cannot debug screenshots. Please make a reduced test case using JS Bin (or similar).

[psukmak]

On nexus 5 everything OK. I just show right case.

[psukmak]

about on iPhone, I upload example code to my server

http://appsoftplus.com/index-test.html

[chaiyot]

There are 2 issues for iframe in Safari's iPhone from that example.

1. Modal doesn't show at the correct position (center of the page) if we put the button down at some level in the iframe (if we put the button at the beginning of iframe it's still works).
2. Contents inside iframe stop displayed at some point for long contents (Cannot scroll down more even though contents are not yet finish) on iPhone.

[chaiyot]

We've manually fix modal show incorrect position in iframe on iPhone by calling focus event again using javascript.It's works.

[small-carbon]

@psukmak Did you solve?

[small-carbon]

@chaiyot Did you solve？

[psukmak]

@majianxiong No, I did not. I waiting update from bootstrap
but you can ues manually fix:
$('#myModal').on('shown.bs.modal', function (e) {
// focus somewhere in modal
});

$('#myModal').on('hidden.bs.modal', function (e) {
// focus somewhere in body
});

[small-carbon]

But not in the middle

[small-carbon]

@psukmak $(document).scrollTop() is zero

[small-carbon]

Relevant solutions：

• https://medium.com/@dvoytenko/amp-ios-scrolling-and-position-fixed-b854a5a0d451#.dfo4munsj
• https://zafiel.wingall.com/archives/8198
  There is no validated.

[small-carbon]

problem is resolved

[cvrebert]

about on iPhone, I upload example code to my server
http://appsoftplus.com/index-test.html

Copied to Plunker for durability: https://plnkr.co/edit/jYMgPUsBwAuTCCze3KWe?p=preview

[cvrebert]

• Form behind of modal can scroll
• When show modal it will be put modal-open class into body in the iframe and modal-open class is overflow: hidden; but this css not working on iphone

This portion seems to be referring to https://bugs.webkit.org/show_bug.cgi?id=153852 , which we've already reported to WebKit.

[cvrebert]

When click change location button, it will show not right. Header of modal not show first. It relates to height of the iframe.
[...]
Modal doesn't show at the correct position (center of the page) if we put the button down at some level in the iframe (if we put the button at the beginning of iframe it's still works).

I can confirm that the user sees the middle of the modal in iOS Safari and the top of the modal in Android Chrome, when the modal within the iframe is initially shown.
Will need to do some more testing to determine who's deviating from the standards and how.

[jeremyjcpaul]

I've also been having problems with this issue. See this JS Fiddle https://jsfiddle.net/tmfq0rnm/4/. It works perfectly everywhere except on iOS due to the iframe issue. On iOS tapping "Click here" will cause the iframe to jump to the bottom rather than to where the modal is displayed. Do we know what the status is of this issue? Is there a good fix for it in the meantime? Looking at the previous comments it seems like all the "fixes" may brake other things which I need to avoid.

[cristianocordeiro07]

I fixed a similar issue with the following solution:

$('#id_iframe').load(function () {
resizeIframeForm();
}

function resizeIframeForm() {

if( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
	// block scroll for mobile;
	// causes underlying page to jump to top;
	// prevents scrolling on all screens
	$('body.modal-open').css('overflow', 'hidden');
	$('body.modal-open').css('position', 'fixed');
} 

}

[mdo]

This is super stale, and I'm not seeing a clear issue anymore with a live demo. I updated the last Fiddle link to the latest version of v4.x and things look okay to me I think? https://jsfiddle.net/deghcsuv/

Closing out.