27

I am bulding a mobile project which has a number of modules having elements positioned as fixed. The issue which am facing is only on browsers running on iOS. The exact issue is that whenever I tr to scroll over the body of the page having , say the bottom toolbar, as fixed, the whole fixed element moves respectively with the scroll, and once the scroll ends completely, then only it comes back to its assigned place.

I have given the body of the page a relative css rule. Please help as this happens only on iOS.

 .add-to-block {
    background: #fff;
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: block;
    height: auto;
    width: 100%;
    *(inner content element) {
        inner content element styling...
     }
}
Aman Pandey
  • 336
  • 1
  • 3
  • 12
  • Could you fix it? I have the same problem working with Ionic 2 in 2017. In Android my navbar works fine, but in IOS it moves with the scroll and when it stops, it returns to its position. – Ivan Lencina Oct 25 '17 at 16:44
  • https://imgur.com/a/2otaHxz I created this bounty. I have the same issue. I have fixed elements (Hafebar, Red John and so on) these are scrolling in the Y Axis with transform (so i can't use the post below) and are fixed in the X axis with position fixed. When scrolling X fast the fixed elements (Hafebar, Red John and so on) move with the scroll and go back to the original position when i stop scrolling. – olivier Feb 20 '19 at 04:44
  • I got the same problem once, I just remove the fixed element out of scroll able div, which fixed my problem you can try that too if it's possible in your case. Hope it helps – Piyush Verma Feb 22 '19 at 10:30

5 Answers5

13

Please try this, source here

    .add-to-block {
        transform: translate3d(0,0,0);
        .....
        .....
    }
Abed Putra
  • 1,153
  • 2
  • 17
  • 37
3

There is not really an easy answer to this as it has been a known issue on ios for a while (supposedly fixed in ios8) but this gives you a few ways to fix it: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios it details all the issues with position fixed on ios devices and possible ways to fix it if you need to use it.

Steven Hoskins
  • 141
  • 8
3

Add height: 100% and overflow: auto for fixed element.

Full example at https://codepen.io/astnt/pen/ExgOqeX

Anton Starcev
  • 1,138
  • 12
  • 9
2

Safari allows you to scroll beyond the limits of the fixed div so that it can put in a nice bouncy effect. When you scroll past this point though, if there is a container that is scrollable, then subsequent touch events get handed off to this. Therefore scrolling does nothing for a bit until control gets handed back to the fixed div.

The fix is to give the container div the overflow-y: hidden style so that Safari does not hand off the touches, and we continue interacting with the fixed div.

mrded
  • 4,674
  • 2
  • 34
  • 36
0

None of the proposed solutions worked for me, although i had the fixed element inside the scrolling div (and moved it up), had no transform or other layer-creating properties on the parent elements (and created a layer on the fixed element) etc.

My solution was to just change the fixed element to be position: sticky;

tuberains
  • 191
  • 9