position fixed doesn t work on iPad and iPhone

Question

I have been struggling with fixed positioning in iPad for a while  I know iScroll and it does not always seem to work  even in their demo   I also know that Sencha has a fix for that  but I couldn t Ctrl   F the source code for that fix   I am hoping that someone may have the solution  The problem is that fixed positioned elements do not get updated when the user pans down up on an iOS powered mobile Safari

User · Answer

Fixed positioning doesn t work on iOS like it does on computers   Imagine you have a sheet of paper  the webpage  under a magnifying glass the viewport   if you move the magnifying glass and your eye  you see a different part of the page  This is how iOS works   Now there is a sheet of clear plastic with a word on it  this sheet of plastic stays stationary no matter what  the position fixed elements   So when you move the magnifying glass the fixed element appears to move   Alternatively  instead of moving the magnifying glass  you move the paper  the webpage   keeping the sheet of plastic and magnifying glass still  In this case the word on the sheet of plastic will appear to stay fixed  and the rest of the content will appear to move  because it actually is  This is a traditional desktop browser   So in iOS the viewport moves  in a traditional browser the webpage moves  In both cases the fixed elements stay still in reality  although on iOS the fixed elements appear to move     The way to get around this  is to follow the last few paragraphs in this article   basically disable scrolling altogether  have the content in a separate scrollable div  see the blue box at the top of the linked article   and the fixed element positioned absolutely      position fixed  now works as you d expect in iOS5

User · Answer

Avoid on the same box using transform --- and position fixed  Element will stay in position static if there is any transform

User · Answer

position  fixed does work on android iphone for vertical scrolling   But you need to make sure your meta tags are fully set  e g   lt meta name  viewport  content  width device-width  height device-height  initial-scale 1 0  user-scalable 0  minimum-scale 1 0  maximum-scale 1 0  gt    Also if you re planning on having the same page work on android pre 4 0  you need to set the top position also  or a small margin will be added for some reason

User · Answer

The simple way to fix this problem just types transform property for your element  and it will be fixed  Happy Coding  -    classname    position  fixed    transform  translate3d 0 0 0       Also you can try his way as well this is also work fine    classname        position  -webkit-sticky

User · Answer

using jquery i am able to come up with this  it doesnt scroll smooth  but it does the trick  you can scroll down  and the fixed div pops up on top   THE CSS   lt style type  text css  gt       btn cardDetailsPg  height 5px  important margin-top -20px       html  body  overflow-x hidden overflow-y auto        lockDiv     background-color   fff    color   000    float left    -moz-box-shadow  0px 4px 2px 2px  ccc -webkit-box-shadow  0px 4px 2px 2px  ccc box-shadow 0px 4px 2px 2px  ccc       lockDiv stick     position  fixed    top  0    z-index  10000    margin-left 0px       lt  style gt    THE HTML   lt div id  lockSticky  gt  lt  div gt   lt div id  lockDiv  gt fooo lt  div gt    THE jQUERY   lt script type  text javascript  gt      function sticky relocate             var window top     window  scrollTop            var div top       lockSticky   offset   top          if  window top  gt  div top                  lockDiv   addClass  stick           else                 lockDiv   removeClass  stick                function               window  scroll sticky relocate           sticky relocate             lt  script gt    Finally we want to determine if the ipod touch in landscape or portrait mode to display accordingly   lt script type  text javascript  gt      if  navigator userAgent match  like Mac OS X i             window onscroll   function              if  window innerWidth  gt  window innerHeight                  alert  landscape                    document getElementById  lockDiv   style top                window pageYOffset   window innerHeight - 268     px                      if  window innerHeight  gt  window innerWidth                  alert  portrait                   document getElementById  lockDiv   style top                window pageYOffset   window innerHeight - 418     px                               lt  script gt

User · Answer

This seems to work for Ionic5 on iphone 6 Plus on iOS 12 4 2  large player       float  left        bottom  0        width  100         position  fixed        background-color  white        border-top  black 1px solid            height  14rem        z-index  100        transform  translate3d 0 0 0        The transform tag makes it work  but it also seems a little clunky in how the scroll works  it is seems to redraw the  on top  element after it s all moved and sort of resets and makes it jump a little  Or  you could also use this tag option as well  position  -webkit-sticky   but then you won t get  or may run in to trouble with WPA browser or Android builds while having to do version checking and have multiple CSS tags   large player       float  left        bottom  0        width  100         position  -webkit-sticky        background-color  white        border-top  black 1px solid            height  14rem        z-index  100        I don t know at what point it was fixed  but later iOS phones work without the transform tag  I don t know if it s the iOS version  or the phone  As most iOS devices are usually on the most recent iOS version  it s pretty safe with go with a weird work around - such as using the transform tag  rather than building in a quirky detection routine for the sake of less than 1  of users  Update  After thinking about this answer further  this is just another way of doing this by platform for ionic5    TS import  Platform   from   ionic angular    constructor  public platform  Platform                This next bit is so that the CSS is shown correctly for each platform          platform ready   then      gt        if  this platform is  android              console log  quot running on Android device  quot            this css iOS   false            if  this platform is  ios              console log  quot running on iOS device  quot            this css iOS   true                 if  this platform is  ipad              console log  quot running on iOS device  quot            this css iOS   true                  css iOS  boolean   false    HTML  lt style  ngIf  quot css iOS quot  gt       small player         position  -webkit-sticky  important             large player         position  -webkit-sticky  important             lt  style gt                 lt style gt       small player       float  left        bottom  0        width  100         position  fixed        background-color  white        border-top  black 1px solid            height  4rem        z-index  100          transform  translate3d 0 0 0                     large player       float  left        bottom  0        width  100         position  fixed        background-color  white        border-top  black 1px solid            height  14rem        z-index  100          transform  translate3d 0 0 0                lt  style gt

User · Answer

A lot of mobile browsers deliberately do not support position fixed  on the grounds that fixed elements could get in the way on a small screen   The Quirksmode org site has a very good blog post that explains the problem  http   www quirksmode org blog archives 2010 12 the fifth posit html  Also see this page for a compatibility chart showing which mobile browsers support position fixed   http   www quirksmode org m css html   but note that the mobile browser world is moving very quickly  so tables like this may not stay up-to-date for long    Update  iOS 5 and Android 4 are both reported to have position fixed support now    I tested iOS 5 myself in an Apple store today and can confirm that it does work with position fixed  There are issues with zooming in and panning around a fixed element though   I found this compatibility table far more up to date and useful than the quirksmode one  http   caniuse com  search fixed  It has up to date info on Android  Opera  mini and mobile   amp  iOS

User · Answer

Fixed Footer  here with jQuery    if  navigator platform     iPad     navigator platform     iPhone     navigator platform     iPod     navigator platform     Linux armv6l          window ontouchstart   function                       fixedDiv   css  display    none               window onscroll   function                   var iPadPosition   window innerHeight   window pageYOffset-45     45 is the height of the Footer              fixedDiv   css  position    absolute                 fixedDiv   css  top   iPadPosition                fixedDiv   css  display    block                in the CSS file should stand   fixedDiv  position  fixed  bottom  0  height  45px   whatever else    Hope it helps

User · Answer

here is my solution to this     CSS    bgimg top       background  url images bg jpg  no-repeat 50  0        position  fixed       top 0       left  0       right 0        bottom 0      HTML   lt body gt   lt div id  bgimg top  gt  lt  div gt        lt  body gt    Explanation is that position fixed for the div will keep the div on the background at all time  then we stretch the div to go on all corners of the browser  provided the body margin   0  using the  left right top bottom  simultaneously   Please make sure you do not use the width and height as this will override the top left right bottom options

User · Answer

I had this problem on Safari  iOS 10 3 3  - the browser was not redrawing until the touchend event fired  Fixed elements did not appear or were cut off   The trick for me was adding transform  translate3d 0 0 0   to my fixed position element    fixed-position-on-mobile     position  fixed    transform  translate3d 0 0 0       EDIT - I now know why the transform fixes the issue  hardware-acceleration  Adding the 3D transformation triggers the GPU acceleration making for a smooth transition  For more on hardware-acceleration checkout this article  http   blog teamtreehouse com increase-your-sites-performance-with-hardware-accelerated-css

User · Answer

In my case  it was because the fixed element was being shown by using an animation  As stated in this link   in Safari 9 1  having a position fixed-element inside an animated element  may cause the position fixed-element to not appear

User · Answer

now apple support that  overflow hidden  -webkit-overflow-scrolling touch

User · Answer

Even though the CSS attribute  position fixed   seems  mostly  working on newer iOS devices  it is possible to have the device quirk and fallback to  position relative   on occasion and without cause or reason  Usually clearing the cache will help  until something happens and the quirk happens again   Specifically  from Apple itself Preparing Your Web Content for iPad      Safari on iPad and Safari on iPhone do not have resizable windows  In   Safari on iPhone and iPad  the window size is set to the size of the   screen  minus Safari user interface controls   and cannot be changed   by the user  To move around a webpage  the user changes the zoom level   and position of the viewport as they double tap or pinch to zoom in or   out  or by touching and dragging to pan the page  As a user changes   the zoom level and position of the viewport they are doing so within a   viewable content area of fixed size  that is  the window   This means   that webpage elements that have their position  fixed  to the viewport   can end up outside the viewable content area  offscreen    What is ironic  Android devices do not seem to have this issue  Also it is entirely possible to use  position absolute   when in reference to the body tag and not have any issues   I found the root cause of this quirk  that it is the scroll event not playing nice when used in conjunction with the HTML or BODY tag  Sometimes it does not like to fire the event  or you will have to wait until the scroll swing event is finished to receive the event  Specifically  the viewport is re-drawn at the end of this event and fixed elements can be re-positioned somewhere else in the viewport   So this is what I do   avoid using the viewport  and stick with the DOM     lt html gt     lt style gt       fixed        position fixed          you can set your other static attributes here too           like height and width  margin  etc                 scrollableDiv        position relative        overflow-y scroll          all children will scroll within this like the body normally would                  viewportSizedBody        position relative        overflow hidden          this will prevent the body page itself from scrolling                lt  style gt     lt body class  viewportSizedBody  gt       lt div id  myFixedContainer  class  fixed  gt         This part is fixed       lt  div gt       lt div id  myScrollableBody  class  scrollableDiv  gt         This part is scrollable       lt  div gt     lt  body gt     lt script type  text javascript  src   your path to jquery  jquery-1 7 2 min js  gt  lt  script gt     lt script gt      var theViewportHeight   window  height            viewportSizedBody   css  height  theViewportHeight           myScrollableBody   css  height  theViewportHeight      lt  script gt   lt  html gt    In essence this will cause the BODY to be the size of the viewport and non-scrollable  The scrollable DIV nested inside will scroll as the BODY normally would  minus the swing effect  so the scrolling does stop on touchend   The fixed DIV stays fixed without interference   As a side note  a high z-index value on the fixed DIV is important to keep the scrollable DIV appear to be behind it  I normally add in window resize and scroll events also for cross-browser and alternate screen resolution compatibility   If all else fails  the above code will also work with both the fixed and scrollable DIVs set to  position absolute

User · Answer

Had the same issue on Iphone X  To fixed it I just add height to the container top  0  height  200px  position  fixed   I just added top 0 because i need my div to stay at top

User · Answer

I ended up using the new jQuery Mobile v1 1  http   jquerymobile com blog 2012 04 13 announcing-jquery-mobile-1-1-0      We now have a solid re-write that provides true fixed toolbars on the   a lot of popular platforms and safely falls back to static toolbar   positioning in other browsers       The coolest part about this approach is that  unlike JS-based   solutions that impose the unnatural scrolling physics across all   platforms  our scrolling feels 100  native because it is  This means   that scrolling feels right everywhere and works with touch  mousewheel   and keyboard user input  As a bonus  our CSS-based solution is super   lightweight and doesn   t impact compatibility or accessibility

User · Answer

This might not be applicable to all scenarios  but I found that the position  sticky  same thing with position  fixed  only works on old iPhones when the scrolling container is not the body  but inside something else   Example pseudo html   body                          lt - scrollbar    relative div        sticky div   The sticky div will be sticky on desktop browsers  but with certain devices  tested with  Chromium  dev tools  device emultation  iPhone 6 7 8  and with Android 4 Firefox  it will not   What will work  however  is  body     div overflow auto        lt - scrollbar         relative div             sticky div

[iphone] position: fixed doesn't work on iPad and iPhone

Examples related to iphone

Examples related to css

Examples related to ipad

Examples related to ios

Examples related to mobile