Div element won't stay at the bottom when ios 7 virtual keyboard is present

Question

I'm having a problem with a div element to stick to the bottom of my web app when ios 7 virtual keyboard appears after pressing a textbox.

I've this div element:

....         <div id="footer" style="text-align:center">             <div id="idName"><img alt="SomeName" src="images/logo.png" /></div>         </div>      </form> </body> 

It uses this style

#footer{ color:#CCC; height: 48px;  position:fixed; z-index:5; bottom:0px; width:100%; padding-left:2px; padding-right:2px; padding:0;  border-top:1px solid #444;  background:#222; /* Old browsers */ background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));   background:    -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */     background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */ background:      -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */ background:     -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */ background:         linear-gradient(top, #999, #666 2%, #222); /* W3C */ } 

And when I press on the textbox, the footer elementer jumps up above the virtual keyboard. It used to work when my iDevices was running on versions before ios 7.

On the left side is before pressing the textbox and on the right side is after pressing the textbox.

The footer jumps above the virtual keyboard.

UPDATE:

I've changed the meta tag provided by Opossum and now the footer stays at the bottom:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">--> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

Extension

This is not a part of the question, but the fix screws things up when running on a Android :) Any solution for that?

Solution: removed maximum-scale and target-densityDpi and now it works for both IOS and Android. The meta tag now looks like this:

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/> 

Answer 1

EDIT: Okay, I found another possible solution. Check your html meta tags for something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 

Replace it with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> 

This fixed the problem for me. I should note that my app is using Cordova though.

Another possible solution:

If you look in config.xml (probably under the resources directory, you should see a line that says:

<preference name="KeyboardShrinksView" value="false" /> 

If you set that to true, it keeps footers from moving above the soft keyboard. However, this also causes the keyboard to sometimes cover up the text field that the user is typing in.

Answer 2

There's the culprit in your #footer class bottom:0px; If you give bottom to any element, on appearance of virtual keyboard, those elements move upwards in iOS 7. The workaround is to use top property.