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

This commit is contained in:
Tulir Asokan 2020-09-05 18:37:50 +03:00
parent 6e6aad0430
commit de072dcd81
3 changed files with 20 additions and 1 deletions

View File

@ -46,6 +46,14 @@ div.pack-list, nav {
div.pack-list { div.pack-list {
overflow-y: auto; } 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 { section.stickerpack {
margin-top: .75rem; } margin-top: .75rem; }
section.stickerpack > div.sticker-list { section.stickerpack > div.sticker-list {

View File

@ -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` 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 { class App extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -109,7 +112,7 @@ class App extends Component {
<nav> <nav>
${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)} ${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
</nav> </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}/>`)} ${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack}/>`)}
</div> </div>
</main>` </main>`

View File

@ -64,6 +64,14 @@ div.pack-list, nav
div.pack-list div.pack-list
overflow-y: auto 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 section.stickerpack
margin-top: .75rem margin-top: .75rem