Do you have an idea why this strange scroll bug happens?

, , ,
#1

Hi all,

in my tiddlywiki-multi-columns plugin (MultiColumn Layout — a non-linear personal web notebook) I experience a strange bug with Chromium-based browsers (Chromium/Chrome/Brave etc.)

  • go to the page and click on a link in the tiddler “The plugin”
  • if column 2 is NOT the active column it should scroll to the opened tiddler
  • if column 2 IS the active column scrolling doesn’t happen (you can change the active column by Alt-Left / Alt-Right)

The only thing that changes is the CSS class btc-river-active that gets added to the btc-river-2 class.
I tried not to add the btc-river-active class but that doesn’t change anything.

I’m hoping for ideas why this could happen so that I possibly can apply a workaround for this

Thank you in advance,
Simon

1 Like
#2

A quick observation:

If clicking a link in the middle column while it is not active, PageScroller.prototype.scrollIntoView() is called once as expected.

If a clicking a link in the middle column while it is active, PageScroller.prototype.scrollIntoView() is called multiple times for different elements. I suspect that this is why it looks like no scrolling is happening as subsequent scrolling cancels out scrolling to the target.

1 Like
#3

Thank you @saqimtiaz , how did you observe this?
I had added a console log in the scrollIntoView method and observed just one call

1 Like
#4

I set a breakpoint in the dev tools at the beginning of PageScroller.prototype.scrollIntoView().

If you are not familiar with using breakpoints for debugging I highly recommend taking the time to learn about them. It really makes debugging a lot less painful than having to log values all over the place.

1 Like
#5

great, thank you @saqimtiaz !

#6

The problem in Chromium browsers is, that one cannot call element.scrollIntoView() more than once at the same time for different elements in different scroll-containers.

Apparently, also scrolling an element using element.scrollIntoView() and scrolling another element at the same time using element.scrollLeft = ... and element.scrollTop = ... doesn’t work.

The problem at the first place was, that I didn’t wrap the sidebar into a <$scrollable> widget.
After wrapping it into such a widget, the problem became more obvious.
Chromium based browsers don’t support scrolling like this to two elements at the same time neither.
I solved that using element.scrollTo() in the scrollable widget (it lacks IE support but I don’t care about that)
Chromium based browsers support scrolling to two or more elements at the same time using element.scrollIntoView() and element.scrollTo()

Now there’s one strange bug remaining. It happens only in the first column and only if I change the active column to the first column. After that, scrolling up/down for THE FIRST TIME using Alt-Up/Alt-Down doesn’t work. After the first time it works.
I’ve seen that a second scroll happens the first time (in the sidebar) but I don’t know why

If anyone has an idea, I would appreciate it a lot

Thank you in advance,
Simon

#7

I tried to look through the repository to follow your latest changes but it was too time consuming in the absence of descriptive commit messages. Perhaps check if you are using a temp or state tiddler, or a system tiddler like $:/History, to determine where to navigate to and whether you are guarding against the required tiddlers/fields being absent.

#8

Thank you @saqimtiaz,

yes, my commit history is not descriptive, I imagine you cannot find anything useful there.

I’m indeed using the system tiddler $:/HistoryList in the first column. The second column uses $:/HistoryList-2 , the third $:/HistoryList-3 and so on.

Which are the required tiddlers/fields being absent I should guard against?

Thank you for your patience,
Simon

#9

To understand the problem who’s interested may follow these steps:

  • open MultiColumn Layout — a non-linear personal web notebook in a Chromium-based browser
  • use Alt-Right to navigate to the second column
  • use Alt-Down to navigate to the second tiddler in the second column
  • observe that it works as intended
  • now use Alt-Left to navigate to the first column
  • use Alt-Down to navigate to the second tiddler in the first column
  • observe that navigation doesn’t happen
  • now use Alt-Up to navigate to the third tiddler in the first column
  • observe that now scrolling in the first column works
  • try scrolling around in the first column, it just works from now on
  • if you change the focused column to another one and come back to the first column, the bug happens again, but always just for the first navigation

Edit: this may just be a symptom of the tiddlers being open in the current setting
I’ve seen that, if there’s a tiddler in edit mode open, scrolling doesn’t work

#10

Thanks @saqimtiaz for helping me on this. Through your comments I found some bugs and workarounds and I can mark this as solved.

Thanks again,
Simon

3 Likes