ios iframe只有在方向从纵向更改为横向后才能展开

Question

I have a scrollable iframe on ios set up with

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ...">
  <iframe style="height: 600px, ...">
  </iframe>
</div>

The height of the iframe is actually set to screen.availHeight , and doesn't change when the orientation changes.

Now, if the modal is opened when the phone is in portrait mode, it works fine. And if the modal is opened when the phone is in landscape mode, it works fine. And if it's opened in landscape mode and rotated into portrait, that works fine too.

BUT, if it's opened in portrait mode and rotated into landscape mode, then the scrolling does not work; you end up sort of scrolling the underlying page, not the modal itself.

This despite the fact that the styling is exactly the same no matter the orientation.

Has this happened to anyone before? Workarounds? What's going on? I am a n00b here, any advice appreciated.

Answer 1

var doOnOrientationChange = function() {
    switch (window.orientation) {
        case -90:
        case 90:
            console.log('landscape');
            if ($('.modal').length && $('.modal').hasClass('in')) {
                $('.modal').scrollTop(1);
            }
            break;
        default:
            console.log('portrait');
            if ($('.modal').length && $('.modal').hasClass('in')) {
                $('.modal.in').css('overflow', 'hidden');
                setTimeout(function() {
                    $('.modal.in').css('overflow-x', 'hidden').css('overflow-y', 'auto');
                }, 10);
            }
            break;
    }
};

window.addEventListener('orientationchange', doOnOrientationChange);

doOnOrientationChange();

I resolve this problem in this way