css Question posted in
Some basic documentation can be found here.

Css – "jumping effect" with sticky position on iOS devices

Header content has "jumping effect" while scrolling. It’s happening only on iOS mobile devices.

The header has sticky position. When I change it to fixed position, it fixes the issue, but then the scroll bouncing effect doesn’t work well. How is it possible to fix this issue without using fixed position?

The url is here where you can see and edit the css code by inspecting in web browser.

enter image description here

I tried to change the position, set the width of children elements in Header, but nothing helped.

Tags:

2

Answers


  1. 0

    The "jumping effect" you’re experiencing with a sticky header on iOS mobile devices is a common issue related to how iOS handles position:sticky combined with scrolling behavior.

    In my personal eperience, the following 3 approaches are always helpfull to a situation like this.

    Use -webkit-overflow-scrolling: touch;:
    Apply the CSS property -webkit-overflow-scrolling: touch; to the container that is being scrolled. This property helps to improve the scrolling behavior on iOS devices and might help resolve the jumping effect.

    .scrollable-container {
    overflow-y: auto; /* or scroll */
    -webkit-overflow-scrolling: touch;
}

    Add a Transparent Spacer: Add a transparent spacer element with the same height as your sticky header at the top of your scrollable content.

    <div style="height: <height of the sticky header>;"></div>

    Or adjust the Z-index: Ensure that the z-index of the sticky header is set appropriately to ensure it stays above other content as expected.

     .sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000; /* adjust as needed */ }

    But all things considerd, I often tend to use javascript alternatives for example like Stickyfill.js

    Login or Signup to reply.
  2. 0

    Since I see a mouse cursor on your GIF, I assume you tested it with an iOS simulator. Is this assumption correct?
    If so, this seems to be a problem/bug in the simulator (which is a common thing with simulators because they are not 100% accurate and the same as the original OS/device).

    I came to this conclusion because testing the sticky positioned header on a real iOS device (iOS Version 17) does not seem to reproduce the unwanted "jumping" effect, as can be seen in the following recording (low-res GIF):

    Scrolling in Safari on iOS 17

    For comparison, here is the "jumping" effect reproduced by testing with the Xcode Simulator (iOS Version 17) on macOS:

    Scrolling in Safari on Xcode Simulator iOS 17

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search