Scrolling issue on position fixed element on iOS

Question

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...
     }
}

Susansusana

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. – Homorganic

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. – Cymbal

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 – Thumbprint

Answer 1

Please try this, source here

.add-to-block {
  transform: translate3d(0,0,0);
}

Outface

it save me lot of time. – Sufferance

Answer 2

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.

Tipsy

Answer 3

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

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

Neoimpressionism

Answer 4

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.

Tailor

Answer 5

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;

Bellicose