From 7fe688e97cecb75d1f869c53580f063809f5c167 Mon Sep 17 00:00:00 2001
From: nkanaev <nkanaev@live.com>
Date: Wed, 4 Jun 2025 22:07:27 +0100
Subject: [PATCH] smooth scrolling on iOS

---
 doc/{changelog.txt => changelog.md} | 1 +
 src/assets/index.html               | 6 +++---
 src/assets/stylesheets/app.css      | 4 ++++
 3 files changed, 8 insertions(+), 3 deletions(-)
 rename doc/{changelog.txt => changelog.md} (99%)

diff --git a/doc/changelog.txt b/doc/changelog.md
similarity index 99%
rename from doc/changelog.txt
rename to doc/changelog.md
index bd9e834..8941363 100644
--- a/doc/changelog.txt
+++ b/doc/changelog.md
@@ -1,6 +1,7 @@
 # upcoming
 
 - (new) serve on unix socket (thanks to @rvighne)
+- (fix) smooth scrolling on iOS (thanks to gatheraled)
 
 # v2.5 (2025-03-26)
 
diff --git a/src/assets/index.html b/src/assets/index.html
index 348821a..384ed73 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -122,7 +122,7 @@
                     </button>
                 </dropdown>
             </div>
-            <div id="feed-list-scroll" class="p-2 overflow-auto border-top flex-grow-1">
+            <div id="feed-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1">
                 <label class="selectgroup">
                     <input type="radio" name="feed" value="" v-model="feedSelected">
                     <div class="selectgroup-label d-flex align-items-center w-100">
@@ -272,7 +272,7 @@
                     </button>
                 </dropdown>
             </div>
-            <div id="item-list-scroll" class="p-2 overflow-auto border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
+            <div id="item-list-scroll" class="p-2 overflow-auto scroll-touch border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
                 <label v-for="item in items" :key="item.id"
                        class="selectgroup">
                     <input type="radio" name="item" :value="item.id" v-model="itemSelected">
@@ -347,7 +347,7 @@
             </div>
             <div v-if="itemSelectedDetails"
                  ref="content"
-                 class="content px-4 pt-3 pb-5 border-top overflow-auto"
+                 class="content px-4 pt-3 pb-5 border-top overflow-auto scroll-touch"
                  :class="{'font-serif': theme.font == 'serif', 'font-monospace': theme.font == 'monospace'}"
                  :style="{'font-size': theme.size + 'rem'}">
                 <div class="content-wrapper">
diff --git a/src/assets/stylesheets/app.css b/src/assets/stylesheets/app.css
index 70a7f7f..7c8c2de 100644
--- a/src/assets/stylesheets/app.css
+++ b/src/assets/stylesheets/app.css
@@ -100,6 +100,10 @@ select.form-control:not([multiple]):not([size]) {
   padding-right: 0;
 }
 
+.scroll-touch {
+  -webkit-overflow-scrolling: touch;
+}
+
 /* custom elements */
 
 .font-serif {