From 7582f34d246a288ce34614f28942083380565a92 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 15 Jan 2018 18:29:28 -0800
Subject: [PATCH] fix jerky scrolling on Safari

---
 routes/_components/Layout.html          |  8 +++++---
 routes/_components/LazyTimeline.html    |  2 +-
 routes/_components/Nav.html             |  1 -
 routes/_components/VirtualList.html     | 18 +++++++++++-------
 routes/_components/VirtualListItem.html |  1 -
 routes/_utils/virtualListStore.js       |  7 +++----
 scss/global.scss                        | 22 ++++++++++++++++++----
 templates/2xx.html                      |  2 +-
 8 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index 3b621ae6..0d5da5e3 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -1,8 +1,10 @@
 <Nav page={{page}} />
 
-<main>
-	<slot></slot>
-</main>
+<div class="container">
+  <main>
+    <slot></slot>
+  </main>
+</div>
 <script>
 	import Nav from './Nav.html';
 
diff --git a/routes/_components/LazyTimeline.html b/routes/_components/LazyTimeline.html
index 2e5d41d8..135690a3 100644
--- a/routes/_components/LazyTimeline.html
+++ b/routes/_components/LazyTimeline.html
@@ -14,7 +14,7 @@
 <style>
   .loading-page {
     width: 100%;
-    min-height: 40vh;
+    min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/routes/_components/Nav.html b/routes/_components/Nav.html
index 4033e16e..79a845b7 100644
--- a/routes/_components/Nav.html
+++ b/routes/_components/Nav.html
@@ -27,7 +27,6 @@
 		right: 0;
 		top: 0;
 		z-index: 10;
-		will-change: transform; /* avoids "repaints on scroll" for fixed position header */
 	}
 
 	ul {
diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html
index 6111631e..2cc32fcd 100644
--- a/routes/_components/VirtualList.html
+++ b/routes/_components/VirtualList.html
@@ -1,5 +1,5 @@
-<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight'/>
-<div class="virtual-list" ref:node style="height: {{$height}}px;">
+<:Window bind:innerHeight='innerHeight'/>
+<div class="virtual-list" style="height: {{$height}}px;">
   <!-- <div class="virtual-list-viewport" ref:viewport></div> -->
   {{#each $visibleItems as item @key}}
   <VirtualListItem :component
@@ -19,7 +19,7 @@
   import { virtualListStore } from '../_utils/virtualListStore'
   import debounce from 'lodash/debounce'
 
-  const DEBOUNCE_TIME = 200
+  const DEBOUNCE_TIME = 500
 
   export default {
     oncreate () {
@@ -35,12 +35,16 @@
           'items': items
         })
       })
-      this.observe('scrollY', debounce((scrollY) => {
-        console.log('setting scrollY', scrollY)
+      document.body.querySelector('.container').addEventListener('scroll', debounce((e) => {
         this.store.set({
-          scrollTop: scrollY
+          scrollTop: e.target.scrollTop
         })
-      }, DEBOUNCE_TIME))
+      }, DEBOUNCE_TIME, {
+        leading: true,
+        trailing: true
+      }))
+    },
+    ondestroy () {
     },
     data: () => ({
       component: null
diff --git a/routes/_components/VirtualListItem.html b/routes/_components/VirtualListItem.html
index 6aff4d67..519a9e31 100644
--- a/routes/_components/VirtualListItem.html
+++ b/routes/_components/VirtualListItem.html
@@ -8,7 +8,6 @@
   .virtual-list-item {
     position: absolute;
     top: 0;
-    will-change: transform;
   }
 </style>
 <script>
diff --git a/routes/_utils/virtualListStore.js b/routes/_utils/virtualListStore.js
index cd26ae42..d88dc864 100644
--- a/routes/_utils/virtualListStore.js
+++ b/routes/_utils/virtualListStore.js
@@ -1,7 +1,5 @@
 import { Store } from 'svelte/store.js'
 
-const RENDER_BUFFER = 1000
-
 class VirtualListStore extends Store {
 }
 
@@ -14,6 +12,7 @@ const virtualListStore = new VirtualListStore({
 virtualListStore.compute('visibleItems',
     ['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
     (items, scrollTop, height, itemHeights, innerHeight) => {
+  let renderBuffer = 2 * innerHeight
   let visibleItems = []
   let totalOffset = 0
   let len = items.length
@@ -26,11 +25,11 @@ virtualListStore.compute('visibleItems',
     //console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
     let isBelowViewport = (currentOffset < scrollTop)
     if (isBelowViewport) {
-      if (scrollTop - RENDER_BUFFER > currentOffset) {
+      if (scrollTop - renderBuffer > currentOffset) {
         continue // below the area we want to render
       }
     } else {
-      if (currentOffset > (scrollTop + innerHeight + RENDER_BUFFER)) {
+      if (currentOffset > (scrollTop + innerHeight + renderBuffer)) {
         break // above the area we want to render
       }
     }
diff --git a/scss/global.scss b/scss/global.scss
index 961c1cfc..6ac49497 100644
--- a/scss/global.scss
+++ b/scss/global.scss
@@ -5,6 +5,11 @@ body {
   line-height: 1.3;
   color: var(--body-text-color);
   background: var(--body-bg);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
 }
 
 #svelte {
@@ -12,21 +17,30 @@ body {
   flex-direction: column;
 }
 
-main {
-  overflow-x: hidden;
+.container {
   overflow-y: auto;
+  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  position: absolute;
+  top: 72px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  will-change: transform; /* avoids "repaint on scroll" in Chrome */
+}
+
+main {
   position: relative;
   max-width: 600px;
   padding: 15px 15px;
   box-sizing: border-box;
-  margin: 85px auto 15px;
+  margin: 15px auto 15px;
   background: var(--main-bg);
   border: 1px solid var(--main-border);
   border-radius: 1px;
   @media (max-width: 767px) {
     padding: 5px 5px;
-    margin: 75px auto 15px;
+    margin: 5px auto 15px;
   }
 }
 
diff --git a/templates/2xx.html b/templates/2xx.html
index 0a1a6271..e8ab9a42 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -17,7 +17,7 @@
 	<style>
 /* auto-generated w/ build-sass.js */
 :root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--deemphasized-text-color:#666}
-body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg)}#svelte{display:flex;flex-direction:column}main{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;max-width:600px;padding:15px 15px;box-sizing:border-box;margin:85px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:75px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
+body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}#svelte{display:flex;flex-direction:column}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:absolute;top:72px;left:0;right:0;bottom:0;will-change:transform}main{position:relative;max-width:600px;padding:15px 15px;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
 
 </style>