From 2a2f5ea03e649af800089e61c3133da0dba74ee0 Mon Sep 17 00:00:00 2001 From: Boris Yankov Date: Tue, 22 Jan 2019 00:50:32 +0200 Subject: [PATCH] webview: Fix small scroll issues with message list Fixes #3301 When showing/hiding UnreadNotice the message list scroll position is moved by the height of that panel. This (and other similar problems) can be fixed by a sophisticated algorithm that 'anchors' the scroll position of the webview to the bottom instead of the default to top. That turned out to be a much more tricky solution, but a much simpler one that is a subset of it would do the trick for now. We add an event handler on the webview's 'resize' event. This will be called in these situations: 1. the keyboard is shown/hidden 2. the phone orientation is changed 3. the compose box shows/hides the topic input 4. the UnreadNotice is shown/hidden This code is an effective fix for (4) I was a bit concerned that (3) might be negatively affected by the fix but after testing it few times I think the behavior is an improvement. Not only that but we should look for even more cases where we can scroll to the very bottom of the list (and maybe expand the 100px distance that triggers it) --- src/webview/js/generatedEs3.js | 3 +++ src/webview/js/js.js | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/webview/js/generatedEs3.js b/src/webview/js/generatedEs3.js index 8e067d8adbb..c98fcb1b8d0 100644 --- a/src/webview/js/generatedEs3.js +++ b/src/webview/js/generatedEs3.js @@ -522,4 +522,7 @@ documentBody.addEventListener('touchmove', function (e) { documentBody.addEventListener('drag', function (e) { lastTouchEventTimestamp = 0; }); +window.addEventListener('resize', function (event) { + scrollToBottomIfNearEnd(); +}); `; diff --git a/src/webview/js/js.js b/src/webview/js/js.js index 32d05a243a5..07dc4eae4b3 100644 --- a/src/webview/js/js.js +++ b/src/webview/js/js.js @@ -684,3 +684,7 @@ documentBody.addEventListener('touchmove', (e: TouchEvent) => { documentBody.addEventListener('drag', (e: DragEvent) => { lastTouchEventTimestamp = 0; }); + +window.addEventListener('resize', (event) => { + scrollToBottomIfNearEnd(); +});