[iOS] ui: Left-edge swipe shouldn't "overwrite" persistent header and footer #803

New Issue

2026-04-24T23:38:53+02:00

adam commented

2026-04-24 23:38:53 +02:00

Originally created by @johnpyp on GitHub (Dec 22, 2023).

Steps to reproduce

Have something playing / paused at the bottom of the app
Go to any page
Swipe from the left edge to "go back"

Expected behaviour

iOS standard behavior here is that the "header and footer" elements should stay stable as the swipe back happens.

Example behavior from Prologue:

Actual behaviour

The header and footer move along with the rest of the page, as in this screenshot:

Environment data

Audiobookshelf Version: 0.9.70-beta

Android App?
iOS App?

iOS Issue

iOS Version: 17.1.2

iPhone model: iPhone 15 Pro

Originally created by @johnpyp on GitHub (Dec 22, 2023). ### Steps to reproduce 1. Have something playing / paused at the bottom of the app 2. Go to any page 3. Swipe from the left edge to "go back" ### Expected behaviour - iOS standard behavior here is that the "header and footer" elements should stay stable as the swipe back happens. Example behavior from Prologue: ![image](https://github.com/advplyr/audiobookshelf-app/assets/20625636/6dcdd842-0191-4fa2-8374-fc61c2e33218) ### Actual behaviour - The header and footer move along with the rest of the page, as in this screenshot: ![image](https://github.com/advplyr/audiobookshelf-app/assets/20625636/ea82eb92-22f3-453e-9756-e51b2d64278d) ### Environment data Audiobookshelf Version: 0.9.70-beta - [ ] Android App? - [x] iOS App? #### iOS Issue iOS Version: 17.1.2 iPhone model: iPhone 15 Pro

adam added the bug label 2026-04-24 23:38:53 +02:00

adam commented

2026-04-24 23:38:54 +02:00

@benonymity commented on GitHub (Dec 28, 2023):

Being a UI stickler I am totally on board with this, but I don't know that there is a way we could implement this easily. Right now the swipe back gesture is handled completely by iOS as if the app is a webpage in Safari. Unless we can somehow track the users finger and update the positioning of the audio player with relation to the screen size every frame when swiping in real time... might be challenging

@benonymity commented on GitHub (Dec 28, 2023): Being a UI stickler I am totally on board with this, but I don't know that there is a way we could implement this easily. Right now the swipe back gesture is handled completely by iOS as if the app is a webpage in Safari. Unless we can somehow track the users finger and update the positioning of the audio player with relation to the screen size every frame when swiping in real time... might be challenging

adam commented

2026-04-24 23:38:54 +02:00

@johnpyp commented on GitHub (Dec 28, 2023):

Hmm I see, I thought the app was using ionic components but it doesn't look like it. Ionic components make this possible and handle the native-feeling animations I believe, but it would be a tall order to integrate them.

@johnpyp commented on GitHub (Dec 28, 2023): Hmm I see, I thought the app was using ionic components but it doesn't look like it. Ionic components make this possible and handle the native-feeling animations I believe, but it would be a tall order to integrate them.

adam commented

2026-04-24 23:38:55 +02:00

@benonymity commented on GitHub (Dec 29, 2023):

Yeah, sadly not. Most of it is code written for the server's UI that got copied into the app, so rewriting would be a monumental effort. It would probably be easier to write a custom swipe handler, but I imagine that would also be a large undertaking

@benonymity commented on GitHub (Dec 29, 2023): Yeah, sadly not. Most of it is code written for the server's UI that got copied into the app, so rewriting would be a monumental effort. It would probably be easier to write a custom swipe handler, but I imagine that would also be a large undertaking

adam commented

2026-04-24 23:38:55 +02:00

@advplyr commented on GitHub (Jan 2, 2024):

Ionic is using webview so are they disabling the swipe back altogether?

I'm pretty sure we can disable the swipe back across the entire app but we can't disable it for specific pages/displays. If we disable it across the entire app we have to write our own swipe right events if we want to keep the navigating back on swipe action

@advplyr commented on GitHub (Jan 2, 2024): Ionic is using webview so are they disabling the swipe back altogether? I'm pretty sure we can disable the swipe back across the entire app but we can't disable it for specific pages/displays. If we disable it across the entire app we have to write our own swipe right events if we want to keep the navigating back on swipe action

adam commented

2026-04-24 23:38:55 +02:00

@benonymity commented on GitHub (Jan 2, 2024):

Yeah, I think that with both Ionic and Capacitor the native swipe back gesture is entirely disabled. In Ionic it makes sense to always have it disabled, as they seem to have a custom gesture controller (nice not to be beholden to webView for configuration, but I imagine creating it was a lot of effort). But it does mean they can do nice things like

this.routerOutlet.swipeGesture = false

for individual pages. Doing something like that seems pretty far beyond the app's currently (esp. as Ionic is in Angular unlike the framework-agnostic Capacitor). But if someone goes to the effort of building a similar UI layer for Vue and tweaking the router that'd solve this issue, but I imagine that won't happen anytime soon.

But in looking around just now I did stumble on this Capacitor swipe back plugin which might make disabling the swipe back on specific pages easier than my hacky touch intercept. Though look like it hasn't been maintained for 5 years...

Regardless, this issue doesn't seem very simple to implement yet, as much as I would love the UI consistency.

@benonymity commented on GitHub (Jan 2, 2024): Yeah, I think that with both Ionic and Capacitor the native swipe back gesture is entirely disabled. In Ionic it makes sense to always have it disabled, as they seem to have a [custom gesture controller](https://github.com/ionic-team/ionic-framework/blob/b31b9f45de1496432561a583843e6166f9aa53f5/core/src/components/nav/readme.md) (nice not to be beholden to webView for configuration, but I imagine creating it was a lot of effort). But it does mean they can do nice things like ```js this.routerOutlet.swipeGesture = false ``` for individual pages. Doing something like that seems pretty far beyond the app's currently (esp. as Ionic is in Angular unlike the framework-agnostic Capacitor). But if someone goes to the effort of building a similar UI layer for Vue and tweaking the router that'd solve this issue, but I imagine that won't happen anytime soon. But in looking around just now I did stumble on [this Capacitor swipe back plugin](https://github.com/diiiary/capacitor-plugin-ios-swipe-back) which might make disabling the swipe back on specific pages easier than my hacky touch intercept. Though look like it hasn't been maintained for 5 years... Regardless, this issue doesn't seem very simple to implement yet, as much as I would love the UI consistency.

adam commented

2026-04-24 23:38:55 +02:00

@advplyr commented on GitHub (Jan 2, 2024):

I'm pretty sure I tried the solution they implemented and it wasn't working but that was a while ago so who knows what I might have missed. We don't need to use their plugin since the code change is a simple one-liner for iOS

self.bridge.getWebView()?.allowsBackForwardNavigationGestures = true

We don't need this for Android

@advplyr commented on GitHub (Jan 2, 2024): I'm pretty sure I tried the solution they implemented and it wasn't working but that was a while ago so who knows what I might have missed. We don't need to use their plugin since the code change is a simple one-liner for iOS `self.bridge.getWebView()?.allowsBackForwardNavigationGestures = true` We don't need this for Android

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/audiobookshelf-app#803