Jump to content
View in the app

A better way to browse. Learn more.

Learn more

Mobile footer/nav doesn't stay when scrolling

Featured Replies

In my community, when scrolling via 1. Safari (web-based app) or 2. via Safari tab on my iPhone, I noticed the footer menu/nav tends to move. How can I get it to stay put?

Screenshot-2025-10-24-at-8-41-58-AM.png

It also does this here as well.

Invision-Community-Insider-Invision-Comm

This is a known iOS 26 issue. We will need to wait for a fix from Apple.

Okay, this should now fully work as far as I have tested it.

@media screen and (max-width: 979px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ipsApp, .ipsLayout_container {
    transform: none !important;
    perspective: none !important;
  }

  .ipsMobileFooter {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  body.atTop .ipsMobileFooter {
    position: static !important;
  }

  body:not(.atTop) .ipsMobileFooter {
    position: fixed !important;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  @supports (-webkit-touch-callout: none) {
    .ios-scroll-fix .ipsMobileFooter {
      position: sticky !important;
      bottom: 0 !important;
      transform: translateY(0);
    }
  }
}

body.atTop .ipsMobileFooter {
  position: static !important;
  display: none !important; 
}

This will keep the mobile sticky again on iOS26 and the refresh functionality working.

Edited by Cedric V

  • Author
1 hour ago, Cedric V said:

Okay, this should now fully work as far as I have tested it.

@media screen and (max-width: 979px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ipsApp, .ipsLayout_container {
    transform: none !important;
    perspective: none !important;
  }

  .ipsMobileFooter {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  body.atTop .ipsMobileFooter {
    position: static !important;
  }

  body:not(.atTop) .ipsMobileFooter {
    position: fixed !important;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  @supports (-webkit-touch-callout: none) {
    .ios-scroll-fix .ipsMobileFooter {
      position: sticky !important;
      bottom: 0 !important;
      transform: translateY(0);
    }
  }
}

body.atTop .ipsMobileFooter {
  position: static !important;
  display: none !important; 
}

This will keep the mobile sticky again on iOS26 and the refresh functionality working.

Thank you! It's working 😄

Mucho better. Appreciate it!

31 minutes ago, Jordan Miller said:

Thank you! It's working 😄

Mucho better. Appreciate it!

Most welcome.

  • Author
On 10/24/2025 at 10:59 AM, Cedric V said:

Most welcome.

I had to remove the code unfortunately. Members were saying it was causing a lot of blank space in certain areas (like notifications). I couldn’t reproduce the error. Only thing I experienced was when deleting topics for example, the pop up window confirming was below the bottom of the screen on mobile. So close!

On 10/26/2025 at 8:30 PM, Jordan Miller said:

I had to remove the code unfortunately. Members were saying it was causing a lot of blank space in certain areas (like notifications). I couldn’t reproduce the error. Only thing I experienced was when deleting topics for example, the pop up window confirming was below the bottom of the screen on mobile. So close!

Do you have any further info, which devices, pages, etc? I haven’t encountered any issues so far, but I’d be happy to investigate further and think of a solution.

I've read the issue that has been affecting sticky elements has been fixed by Apple in the iOS 26.1.0 betas, should be released publicly early November.

9 hours ago, Day. said:

It’s out now and fixed the issue.

Thanks for letting us know :)

1 hour ago, Marc said:

Thanks for letting us know :)

It’s also fixed the tap to top in WPA, can’t remember the topic I posted that in.

Recently Browsing 0

  • No registered users viewing this page.

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.