[Bug] Browser zoom breaks scroll locking

Using the browser zoom function (thus changing the scale of fonts, which is just another way of altering DPI to be honest) breaks autoscroll, and also changes the apps’ impression of where it is in scrollback.

Reproduce:
Create a screen or two of scrollback. Use alt+mousewheel or cmd-+ to increase browser scaling. Scroll locking will now break.

Edit: Additionally, collapsing sidebars (such as the realm sidebar) while in browser scaled mode can also break scrolling.

Hehe, you broke it again?!

Wasn’t me this time! Mac user reports it happening, I see later that attempts to reproduce it is inconsistent for other users, so I dunno. Keep a weather eye out I suppose.

1 Like

I failed to reproduce it in Chrome. If you succeed with reproducing it, do the following:

  1. go to Console in Developer tools
  2. try to scroll to bottom, but fail to lock
  3. Copy a lot of the “Scroll debug info:” lines in the log, and post them here

Hopefully fixed in Release v1.1.0 - Introducing the address command

Reopen this one, as the issue still appears on Safari:

Some debug info (from Arilin):

[Log] Scroll debug info: – 6688 – 843 – 7581 – 6677 – false (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6714 – 843 – 7581 – 6688 – false (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6734 – 843 – 7581 – 6714 – false (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6741 – 843 – 7581 – 6734 – true (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6742 – 843 – 7581 – 6741 – true (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6743 – 843 – 7581 – 6742 – true (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6745 – 843 – 7581 – 6743 – true (main.e7e29011.js, line 1)
[Log] Scroll debug info: – 6738 – 843 – 7581 – 6745 – true (main.e7e29011.js, line 1)"

Seconding this from Arilin, but also clarifying it’s Safari on macOS, for me Safari 14.0.3 on macOS 11.2.3 This also seems to affect Safari on iPadOS. 14.4.1 I THINK the cause might be after you’ve used the help commands, vs actual communication. As it was working fine on iPad until I checked the help docs. After that it broke. Reloading fixed it again, on BOTH OSes. Perhaps console messages are what is breaking it?

value — SimpleBar.js:95Scroll debug info:  – 88 – 634 – 722 – 90 – true
_handleOnmessage — ResClient.js:779RC <  – "{\"event\":\"core.char.c174s58t874aa7q2f0ig.ctrl.out\",\"data\":{\"id\":\"c17a30gt874aa7q2fdig\",\"type\":\"pose\",\"time\":1615765890649,\"char\":{\"id\":\"c11k…"
value — SimpleBar.js:95Scroll debug info:  – 91 – 634 – 745 – 88 – false
value — SimpleBar.js:95Scroll debug info:  – 94 – 634 – 750 – 91 – false
value — SimpleBar.js:95Scroll debug info:  – 98 – 634 – 750 – 94 – false
value — SimpleBar.js:95Scroll debug info:  – 102 – 634 – 750 – 98 – false
value — SimpleBar.js:95Scroll debug info:  – 106 – 634 – 750 – 102 – false
value — SimpleBar.js:95Scroll debug info:  – 110 – 634 – 750 – 106 – false
value — SimpleBar.js:95Scroll debug info:  – 114 – 634 – 750 – 110 – false
value — SimpleBar.js:95Scroll debug info:  – 117 – 634 – 750 – 114 – true
2value — SimpleBar.js:95Scroll debug info:  – 117 – 634 – 750 – 117 – true
value — SimpleBar.js:95Scroll debug info:  – 116 – 634 – 750 – 117 – true
value — SimpleBar.js:95Scroll debug info:  – 118 – 634 – 750 – 116 – false
value — SimpleBar.js:95Scroll debug info:  – 119 – 634 – 750 – 118 – true
3value — SimpleBar.js:95Scroll debug info:  – 119 – 634 – 750 – 119 – true
value — SimpleBar.js:95Scroll debug info:  – 120 – 634 – 750 – 119 – true
value — SimpleBar.js:95Scroll debug info:  – 120 – 634 – 750 – 120 – true
value — SimpleBar.js:95Scroll debug info:  – 121 – 634 – 750 – 120 – true
value — SimpleBar.js:95Scroll debug info:  – 121 – 634 – 750 – 121 – true
value — SimpleBar.js:95Scroll debug info:  – 122 – 634 – 750 – 121 – true
3value — SimpleBar.js:95Scroll debug info:  – 122 – 634 – 750 – 122 – true
value — SimpleBar.js:95Scroll debug info:  – 123 – 634 – 750 – 122 – true
value — SimpleBar.js:95Scroll debug info:  – 116 – 634 – 750 – 123 – true
_handleOnmessage — ResClient.js:779RC < 
"{\"event\":\"core.char.c174s58t874aa7q2f0ig.ctrl.out\",\"data\":{\"id\":\"c17a398t874aa7q2fdj0\",\"type\":\"ooc\",\"time\":1615765925627,\"char\":{\"id\":\"bvh05fot874ehfs7rtfg\",\"name\":\"Maximus\",\"surname\":\"Woof\"},\"msg\":\"And not surprisingly, no software updates available either. Are there /any/ modern browsers for PowerPC macs?\"}}"
_handleOnmessage — ResClient.js:779RC < 
"{\"event\":\"core.char.c174s58t874aa7q2f0ig.ctrl.out\",\"data\":{\"id\":\"c17a3ogt874aa7q2fdjg\",\"type\":\"pose\",\"time\":1615765986277,\"char\":{\"id\":\"c11uie0t874ae6uhmpng\",\"name\":\"Raeth\",\"surname\":\"Fennec\"},\"msg\":\"waggles paws out at Ayawni from amidst the tangle of Trixx tail! \\\"Mhmmfmph!\\\" or, 'there's another long-tail kitty thing help!'\"}}"
_handleOnmessage — ResClient.js:779RC <  – "{\"event\":\"core.char.c11uie0t874ae6uhmpng.change\",\"data\":{\"values\":{\"idle\":1}}}"
_handleOnmessage — ResClient.js:779RC <  – "{\"event\":\"core.char.c11uie0t874ae6uhmpng.inroom.change\",\"data\":{\"values\":{\"idle\":1}}}"`Preformatted text`

Thanks for the additional info!

It seems to be some issue of the Safari scroll “bouncing” back up a bit.

The first number in that list is the scrollTop value, telling me how far down you’ve scrolled from the top. I compare this value with what it was last, and if it value has decreased (you are scrolling up), I release the lock.

Now, checking your values, I see 122, 123, 116. Since 116 < 123, the scroll is released.
Why is this? As said, does Safari has some sort of scroll “bounce” effect perhaps if you pull it down a bit beyond?

I’ll add some info for anyone daring to try debugging using the Javascript source maps:

  • The issue likely lies in SimpleBar.js
  • On scroll, the _onScroll is called: SimpleBar.js - line 92
  • The check to release is done here: SimpleBar.js - line 96

[EDIT]

I have made a fixed, based on this. It will be part of next release.

It turns out I reintroduced Maximus’ issue where the scroll wheel doesn’t unlock the scrolling.

SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 171877 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true
SimpleBar.js:97 Maximus' debug info:  172056 1156 173213 172057 true
SimpleBar.js:97 Maximus' debug info:  172057 1156 173213 172056 true

And @Lochiel still has issues:

Accipiter, I had the scrolling fail today. It had been fine for several days before, but maybe I just wasn’t doing much with the window and didn’t happen to do any of the things that make it fail to auto-scroll. Anyway,

After I noticed it wasn’t scrolling, but at a point where I was scrolled down to the bottom of the window:

[Log] Maximus’ debug info: – 35067 – 486 – 35552 – 35068 – true (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35067 – 486 – 35552 – 35067 – true (main.51b73ed0.js, line 1, x2)
[Log] Maximus’ debug info: – 35066 – 486 – 35552 – 35067 – true (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35066 – 486 – 35552 – 35066 – true (main.51b73ed0.js, line 1, x4)
[Log] Maximus’ debug info: – 35065 – 486 – 35552 – 35066 – true (main.51b73ed0.js, line 1)

After some additional messages arrived but did not scroll automatically into view, and also after scrolling down slightly (but not all the way) since there were no Maximus lines in the console at that point:

[Log] Maximus’ debug info: – 35080 – 486 – 35692 – 35079 – false (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35082 – 486 – 35692 – 35080 – false (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35083 – 486 – 35692 – 35082 – false (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35084 – 486 – 35692 – 35083 – false (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35085 – 486 – 35692 – 35084 – false (main.51b73ed0.js, line 1)

After scrolling all the way down and entering a pose, which also did not scroll automatically into view:

[Log] Maximus’ debug info: – 35207 – 486 – 35692 – 35206 – true (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35207 – 486 – 35692 – 35207 – true (main.51b73ed0.js, line 1, x5)
[Log] Maximus’ debug info: – 35208 – 486 – 35692 – 35207 – true (main.51b73ed0.js, line 1)
[Log] Maximus’ debug info: – 35208 – 486 – 35692 – 35208 – true (main.51b73ed0.js, line 1, x11)
[Log] Maximus’ debug info: – 35205 – 486 – 35692 – 35208 – true (main.51b73ed0.js, line 1)

This is what the numbers mean:

  1. scrollTop - how far down you have scrolled from the top of the log.
  2. clientHeight - the height of the visible chat log.
  3. scrollHeight - the height of the total chat log, including what can’t be seen.
  4. previous scrollTop - the previous scrollTop value. Always equals 1. from previous row.
  5. was locked - true if the client previously was locked-to-bottom.

So, when scrollTop + clientHeight = scrollHeight, you are at the bottom.

Now, if scrollTop (1) is less than previous scrollTop (4), it will unlock from bottom, and stay.
For some reason, the last line says you scrolled up 3 pixels (from 35208 to 35205), thus “freeing” yourself from being locked to bottom.

Not sure why though…
The hunt for the perfect scroll-to-bottom lock still goes on!

/Accipiter