Scrolling issue on position fixed element on iOS

ios css scroll css-position fixed
Aman Pandey picture Aman Pandey · Oct 20, 2014 · Viewed 23.2k times · Source

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

Answer

Abed Putra picture Abed Putra · May 31, 2018

Please try this, source here

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

Related questions

While scrolling on an iOS device, the z-index of elements isn't working

My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath them when you scroll. Everything works just fine on my Mac but on …

Read More
iOS not respecting z-index with -webkit-overflow-scrolling

Problem: On iOS the z-index of a scrollable area is ignored when using -webkit-overflow-scrolling. If two objects with -webkit-overflow-scrolling overlap the lower one is scrolled instead of the one being displayed above. How to reproduce: Create two elements overlaying each …

Read More
position: fixed doesn't work on iPad and iPhone

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 …

Read More