From de072dcd81de37e460e1c47906f377226fec436b Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 5 Sep 2020 18:37:50 +0300
Subject: [PATCH] Add hack to make scrolling work on iOS (ref #8)
---
web/index.css | 8 ++++++++
web/index.js | 5 ++++-
web/index.sass | 8 ++++++++
3 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/web/index.css b/web/index.css
index df7d367..e3c8583 100644
--- a/web/index.css
+++ b/web/index.css
@@ -46,6 +46,14 @@ div.pack-list, nav {
div.pack-list {
overflow-y: auto; }
+div.pack-list.ios-safari-hack {
+ position: fixed;
+ top: calc(12vw + 2px);
+ bottom: 0;
+ left: 0;
+ right: 0;
+ -webkit-overflow-scrolling: touch; }
+
section.stickerpack {
margin-top: .75rem; }
section.stickerpack > div.sticker-list {
diff --git a/web/index.js b/web/index.js
index 6e4451e..921c591 100644
--- a/web/index.js
+++ b/web/index.js
@@ -15,6 +15,9 @@ let HOMESERVER_URL = "https://matrix-client.matrix.org"
const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/r0/thumbnail/${mxc.substr(6)}?height=128&width=128&method=scale`
+// We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs
+const isMobileSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
+
class App extends Component {
constructor(props) {
super(props)
@@ -109,7 +112,7 @@ class App extends Component {
<nav>
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
</nav>
- <div class="pack-list" ref=${elem => this.packListRef = elem}>
+ <div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack}/>`)}
</div>
</main>`
diff --git a/web/index.sass b/web/index.sass
index 300c0c0..6f5ad4a 100644
--- a/web/index.sass
+++ b/web/index.sass
@@ -64,6 +64,14 @@ div.pack-list, nav
div.pack-list
overflow-y: auto
+div.pack-list.ios-safari-hack
+ position: fixed
+ top: $nav-height
+ bottom: 0
+ left: 0
+ right: 0
+ -webkit-overflow-scrolling: touch
+
section.stickerpack
margin-top: .75rem
--
GitLab