Scroll performance issues with this theme

[usizu]

This theme is really wonderful, but I seem to have some scroll performance issues with it.

There is weird scroll behaviour (on desktop, macos). It's a bit like lag, after you scroll the view will jump ahead slightly of wherever you scroll to. It doesn't matter if its a short document. And when you scroll, its as if it takes a second for the scroll bar to move, like its waiting. It feels as if there were some script that is updating the scroll position independently of your own scrolling, and it is always slightly out of sync.
This doesn't happen when i switch to another theme, so I believe it to be this one.

We were trying to figure it out in the discord: https://discord.com/channels/686053708261228577/702656734631821413/884074199382110238

[chetachiezikeuzor]

Interesting. I don't seem to be getting this behavior at all, even with fast scrolling. Perhaps I'm missing something? Though, I do have a few things in mind that may be causing the issue, just from looking at your gif. I'll have to troubleshoot later today.

scrolling.mp4

[usizu]

Yes its weird, i get it even with very small and slow scrolls

[chetachiezikeuzor]

What the heck!? Yea, that looks SUPER annoying! I'm gonna try my best to update the theme today and see if we can sort this out. ☹️

[bwydoogh]

I am noticing same behavior when using the theme together with the Sliding Panes plug-in (when > 5 (larger) notes are open at the same time). I noticed that the CSS transitions result in bad performance (macOS) (f.e. the "Workspace" part of the theme). Dropping those CSS transitions result in much better performance.

[chetachiezikeuzor]

I am noticing same behavior when using the theme together with the Sliding Panes plug-in (when > 5 (larger) notes are open at the same time). I noticed that the CSS transitions result in bad performance (macOS) (f.e. the "Workspace" part of the theme). Dropping those CSS transitions result in much better performance.

You just got rid of the transitions and it resulted in better scrolling performance? I guess I'm not understanding how that impacts scrolling. Did bad performance occur only with Sliding Panes on? (I don't use this plugin btw)

@usizu I'm assuming it occurs for you regardless of any plugin being toggled on/off. Is this correct?

[usizu]

Yep I tried toggling them all off by enabling safe mode and reloading obsidian and the same behaviour persists

[bwydoogh]

Did bad performance occur only with Sliding Panes on

Correct.

[chetachiezikeuzor]

Sorry for the late update guys. I've decided to have a toggle able setting to shut off certain animations added by the theme. I'm planning on releasing the update on Friday, so thanks for your patience. And hopefully this is a workable solution to the issue. Do share your thoughts with me if either of you have any ideas. Thanks!

[usizu]

I was just testing out the 'california coast' theme and realised that I have the same scroll issue in that one too. Since it says Yin Yang was inspired by that one, maybe there is some common feature to both of them that is causing the scroll issues.

Also by subtracting code in chunks I managed to isolate the part that is causing the performance issues. It's on line 6178:

body:not(.no-svg-replace) .nav-file-title-content:before {
  content: "☐";
  font-family: sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

By removing this the performance goes back to normal. It works even if you only remove the content: "☐"; part (which causes the icons to disappear), so it seems like its the icons themselves that are the issue.

Also tested that if I simply hide the left sidebar (or don't have the File Explorer or Tag Pane visible) then the problem goes away also. So something about those icons slows everything down enough that scrolling in main Editor/Preview panes affected. Scrolling in the icon panes is also slow, and also is normal if that code is removed.

[chetachiezikeuzor]

@usizu Ive already found this a while ago, and I went ahead and replaced the icons in file explorer with font instead of mask image. The issue seems to be using mask images, not necessarily icons (though icons in general will slow things down at least a bit). I believe it takes more to render the mask image, which is resulting in poor performance. There are other themes that also have icons, and in using them, they appear to have the same scrolling issue as Y&Y. I don’t think California Coast does this the same way I do though, I actually think mine was much more inefficient. But I’m still working on optimizing the font icons for mobile.

Also, there has already been a setting in Style Settings to remove file explorer icons, so no need for editing the css file itself.

There is also a setting to remove all custom icons completely. Every custom icon is a mask image, so this will surely increase scrolling performance.

[chetachiezikeuzor]

Hello! Apologies for the late response. I've just recently updated the theme and I've included some changes to icons in side pane (now using icon font instead of mask image), and also a setting to disable side pane animations. Please let me know how the update performs for you guys and keep me posted on any changes I should make. Thanks!

[usizu]

With the global remove custom icons setting it seems to perform normally again. Though it seems its still using mask image when the icons are on? (and it lags if I do leave them on). But am happy to just turn them off and have good performance.