Scroll performance issues with this theme about yin-and-yang-theme

[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!

[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. ☹️

[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!

[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

[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.

[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.

[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.