Add hack to make scrolling work on iOS (ref #8)

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 {

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>`

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