From de072dcd81de37e460e1c47906f377226fec436b Mon Sep 17 00:00:00 2001 From: Tulir Asokan 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 { -
this.packListRef = elem}> +
this.packListRef = elem}> ${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack}/>`)}
` 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