CODEWITHSUNDEEP
htmlioscss
Mike_G
Mike_G

Reputation: 16502

iOS 8.3 fixed HTML element disappears on input focus

I have a strange situation that sounds very much like the many fixed element issues with iOS on Stack Overflow, but with a twist. This only happens when the parent document is scrollable. I am also using an iframe. Below is a representation of the HTML I am displaying 

<body>
   /*
    main content
    */

   <div class="myCtrl"> 
     <iframe src="page2.htm"/>//iframe contains html page with an input element
     <div></div>
   </div>
</body>

.myCtrl has a style of:

 .myCtrl {
    max-width: none;
    max-height: 690px;
    width: 100vw;
    height: 75vh;
    bottom: 0;
    z-index: 1000;
    right: 0;
}

The iframe contains several input elements that when focused (and soft keyboard pops up), .myCtrl is pushed out of view. If I type something, .myCtrl comes back in to view and is displayed correctly. If I remove focus from an input, .myCtrl does NOT leave the view and correctly stays put. The .myCtrl will then behave correctly, respecting position:fixed, for the rest of the browser session regardless if an input has focus or not.

both the parent page and the iframe have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> in the header.

Meta tag solutions don't seem to work.

using position:absolute doesn't seem feasible since .myCtrl is not able to receive any event notifications from input focus.

-webkit-overflow-scrolling:touch; doesn't seem feasible since .myCtrl is appended to the body, and I have no control over the content structure.

css font resizing doesn't seem to work either.

Upvotes: 0

Views: 1887

Answers (1)

oron tech
oron tech

Reputation: 85

I had the same problem and this is what I came up with in order to solve it. The issue is that the Iframe container is losing his position (mine was fixed ) and it get changed to absolute.

so I wanted it to be fixed when the keyboard is open, and make sure that the window wont scroll too much.

so here is the code:

window.onscroll = function () {//is called when the keyboard is open
    if (window.pageYOffset > window.innerHeight / 3) {//my decision you can play with it as you would like 
        window.scrollTo(0, window.innerHeight / 3);
        if (document.getElementById('IframeWrapperID').style.position !== 'fixed')  {
            document.getElementById('IframeWrapperID').style.position = 'fixed';
        }
    }
};

*My iframe had position absolute. Hope it helped.

Upvotes: 1

Related Questions