From 99c44f348a41367d1d6c31ab665c4caaa8fcb7b2 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Fri, 7 Dec 2018 23:23:48 -0800 Subject: [PATCH] fix(scroll): improve flicker on back navigation (#756) * fix(scroll): improve flicker on back navigation It's still not perfect in Firefox for Android, but it's improved. Partial fix for #753 * the double raf makes no difference here --- routes/_components/compose/ComposeBox.html | 5 ++++- .../compose/ComposeStickyButton.html | 2 +- .../virtualList/VirtualListContainer.html | 18 ++++++++++-------- scss/global.scss | 1 + templates/2xx.html | 2 +- 5 files changed, 17 insertions(+), 11 deletions(-) diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html index baaf2f4..d9d6728 100644 --- a/routes/_components/compose/ComposeBox.html +++ b/routes/_components/compose/ComposeBox.html @@ -15,7 +15,10 @@ - + {#if !hideBottomBorder}
{/if} diff --git a/routes/_components/compose/ComposeStickyButton.html b/routes/_components/compose/ComposeStickyButton.html index d74c00d..f79c3ec 100644 --- a/routes/_components/compose/ComposeStickyButton.html +++ b/routes/_components/compose/ComposeStickyButton.html @@ -1,4 +1,4 @@ -
+
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html index 23a69d1..4839ff2 100644 --- a/routes/_components/virtualList/VirtualListContainer.html +++ b/routes/_components/virtualList/VirtualListContainer.html @@ -34,13 +34,15 @@ let { initializedScrollTop } = this.get() if (!initializedScrollTop && allVisibleItemsHaveHeight) { this.set({ 'initializedScrollTop': true }) - mark('set scrollTop') - console.log('forcing scroll top to ', scrollTop) - scrollContainer.scrollTop = scrollTop - stop('set scrollTop') - doubleRAF(() => { - console.log('initialized VirtualList') - this.fire('initialized') + requestAnimationFrame(() => { + mark('set scrollTop') + console.log('forcing scroll top to ', scrollTop) + scrollContainer.scrollTop = scrollTop + stop('set scrollTop') + doubleRAF(() => { + console.log('initialized VirtualList') + this.fire('initialized') + }) }) } }) @@ -116,4 +118,4 @@ allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight } } - \ No newline at end of file + diff --git a/scss/global.scss b/scss/global.scss index d1606c3..7f42546 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -62,6 +62,7 @@ main { min-height: 70vh; @media (max-width: 767px) { margin: 5px auto 15px; + min-height: 100vh; } } diff --git a/templates/2xx.html b/templates/2xx.html index c493b9a..31530df 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -17,7 +17,7 @@