CODEWITHSUNDEEP
javascriptiosiframe
B. Silverwood
B. Silverwood

Reputation: 51

iframe scrolling issue in ios

Our current scenario is a web page (created by us) displayed within an iframe in someone elses website. The iframe contains a kendo panelbar, and as you expand items, you can scroll further and further down the page as the height of the content increases. A button can be clicked to open a bootstrap modal, but if you are scrolled down the page then the modal appears at the top, sometimes completely out of view. You can see that it has opened because the background darkens slightly, as expected, but you have to scroll up the page in order to view the modal. It only seems to be a problem on ios, and does seem to happen in both safari and chrome. We have tested it on ios 10.3.3.

Here is a picture of the bug in action:

iPhone iframe modal bug

The iframe is as follows:

<iframe src="..." width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">

I have tried manually scrolling the modal into view, but it doesn't seem to work as expected inside the iframe. The function I am using to try and scroll the modal into view is as follows:

(function ($) {
    $.fn.scrollTo = function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'normal');
        return this; // for chaining...
    }
})(jQuery);

This is triggered by the 'shown' event for the modal:

$("#contactUs_modal").on('shown.bs.modal', function (e) {           
    $("contactUs_modal").scrollTo();
    $("#name").focus();
});

I have also tried scrollIntoView, scrollTop etc. with no luck, and $(window).scrollTop(0); scrolls the background to the top, not the modal.

Any suggestions would be much appreciated, I've pretty much run out of ideas.

Upvotes: 0

Views: 374

Answers (1)

Guy
Guy

Reputation: 3096

It looks like a bootstrap modal scrolling issue rather than an iFrame issue.

Upvotes: 0

Related Questions