Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

resize_handler: Fix scroll jumps on iOS. 

The URL bar in iOS shrinks / expands on scrolling causing change
in height. This triggers our resize handler and forces user to
jump to the selected message. This jump triggers before our
keep pointer in view logic kicks in which means user scrolls back
to the previous selected message instead of scrolling forward.

To fix this, we only do this jump when width changes on mobile
devices.

Note that modern devices support resizeable windows of all forms but
for most use cases where app is full expanded, this seems like the
right fix.
This commit is contained in:
Aman Agrawal 2024-06-17 07:36:26 +00:00 committed by Tim Abbott
parent a98363fe36
commit 885957c529
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/resize_handler.ts
View File

@ -13,6 +13,7 @@ export let _old_width = $(window).width();
export function handler(): void {
const new_width = $(window).width();
let width_changed = false;
const mobile = util.is_mobile();
if (!mobile || new_width !== _old_width) {
@ -21,6 +22,7 @@ export function handler(): void {
if (new_width !== _old_width) {
_old_width = new_width;
width_changed = true;
}
resize.resize_page_components();
compose_ui.autosize_textarea($("textarea#compose-textarea"));
@ -30,10 +32,19 @@ export function handler(): void {
// Re-compute and display/remove 'Show more' buttons to messages
condense.condense_and_collapse(message_lists.all_current_message_rows());
// Height can change on mobile OS like i0S if scrolling causes URL bar to change height.
// We don't want to cause scroll jump in that case and just let our logic for keeping the
// selected message in the view handle it. Width can change due change in device orientation
// in which case we want to scroll to the selected message.
const only_height_changed_on_mobile = mobile && !width_changed;
// This function might run onReady (if we're in a narrow window),
// but before we've loaded in the messages; in that case, don't
// try to scroll to one.
if (message_lists.current !== undefined && message_lists.current.selected_id() !== -1) {
if (
!only_height_changed_on_mobile &&
message_lists.current !== undefined &&
message_lists.current.selected_id() !== -1
) {
message_viewport.scroll_to_selected();
}
}