Android Web App: Position:Fixed Broken

Android Web App : Position:fixed broken?

On my Android N1 with CyanogenMod i had this trouble too and the fix:

   <meta
     name="viewport"
     content="width=100%,
     initial-scale=1,
     maximum-scale=1,
     minimum-scale=1,
     user-scalable=no"/>

Specifically the user-scalable=no; part, you can also put 0 instead of no.

Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.

Position fixed not working in mobile browser

position: fixed doesn't work in most of the older versions of iOS and Blackberry. I have tried this fix in most of the mobile browsers and it worked smoothly without any JavaScript plugins.

Use -webkit-backface-visibility: hidden;

.fixed {  position: fixed;  top: 0px;  left: 0px;  width: 320px;  height: 50px;  background: red;  -webkit-backface-visibility: hidden;  /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/}

<div class="fixed">  Hi I m Position Fixed</div><div>  sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>sample text  <br/>
</div>

Position fixed on chrome mobile causing element to move on scroll up/down

For some reason, my Google Chrome on mobile required minimum-scale=1 in the viewport <meta/>.

<meta name="viewport" content="minimum-scale=1"/>

Phonegap 2.8 Position: fixed is not working properly

So, inspired by this link, I made a quick fiddle on how this could work without position:fixed. Note that the fiddle is not the same as the code here, it just illustrates how this is supposed to work.

HTML

<div class="page-wrapper">
    <div class="header"><h3>header</h3></div>
    <div class="content-wrapper">
        <div class="content">
          <!-- Your content goes here -->
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.page-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.header {
    position: absolute;
    top:0;
    left:0;
    right:0;
    padding: 3px 0;
    color: #FFF;
    background: #000;
    text-align: center;
}
.content-wrapper {
    position: absolute;
    padding:0;
    top: 65px;
    left: 0;
    right: 0;
    bottom:0;
    background: #CCC;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.content {
    padding: 15px;
}

position:fixed not working on mobile, works on desktop

Mobile browsers by default try to trick the rendering engine into thinking that the browser window has a more computer-like size.
This is needed because otherwise most web pages would be totally unusable on mobile devices with limited resolution (especially phones).

You can however use special tags to tell that the HTML page has been indeed designed for this kind of device, thus disabling all scaling and resolution virtualization logic in the mobile browser.

Something that can for example fix the problem for iOS devices and android devices is adding

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

This tag in the <head> section will allow your page and javascript code to deal with real device pixels and screen size.

position: fixed is not working in iOS when loading Angular site inside iframe in Ionic 3

put this css in your style.css

body {
    margin: 0px;
}
h3 {
  color: white;
  padding:0px 50px;
}
my-app{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

app-header,app-home,app-footer{
  position: absolute;
  left: 0;
  width: 100%;
}
app-header,app-footer{
  text-align: center;
  color: white;
  height: 50px;
   background-color:#47454b;
}
app-header{
  top:0;
}
app-footer{
  bottom:0;
}
app-home {
  top: 50px;
  bottom: 50px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

remove all css of header.component.css and footer.component.css

here is stackblitz link https://stackblitz.com/edit/angular-load-ionic-iframe-knkgq4?file=src%2Fstyles.css

position fixed is not working

you need to give width explicitly to header and footer

width: 100%;

Working fiddle

If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.

Android Web App: Position:Fixed Broken