Visual bug / incompatibility with some codeblock plugins

ndit-dev commented 3 weeks ago

Please check that this issue hasn't been reported before.

[X] I searched previous Bug Reports didn't find any similar reports.

Expected Behavior

When a tasks query displays tasks and one task is edited, the tasks query should update accordingly.

Screen recording click to play TASKS_expectedBehaviour

Current behaviour

When a codeblock plugin like Obsidian-Code-Styler or CodeblockCustomizer is enabled in the same vault, a visual bug occurs in tasks queries during loading or updating. Tasks load slower than expected, and all the tasks in the query is temporarily loaded under the tasks query field causing the contonent on the page to jump/flicker during the load.

This issue likely affects other plugins that apply themes to codeblocks. While this bug is being reported here first due to multiple conflicting plugins causing the behavior, it may not be caused by or fixable through Obsidian-tasks.

Screen recording click to play TASKS_currentBehaviour

Steps to reproduce

create a vault
install and enable Code Styler and/or Codeblock Customizer community plugins.
install and enable Tasks community plugin

create a new note containing


- [ ] EDIT ME TO to trigger bug/incompability!

[ ] some task
[ ] some other task

Switch to Live Preview
Edit a few characters on the EDIT ME task line, and observe the flickering update

or download this example vault testTasksVisualBug.zip

Which Operating Systems are you using?

[ ] Android
[X] iPhone/iPad
[ ] Linux
[ ] macOS
[X] Windows

Obsidian Version

1.6.7

Tasks Plugin Version

8.9.0

Checks

[ ] I have tried it with all other plugins disabled and the error still occurs

Possible solution

Don't use the conflicting plugins.

claremacrae commented 3 weeks ago

Hi,

Reproduction

thanks for including a sample vault to download, videos and steps to reproduce.

In the Zipped vault, I was only able to reproduce the bug in Live Preview.

So I've added steps 5 and 6 to the repro, for completeness.

Issues involving other plugins

This issue likely affects other plugins that apply themes to codeblocks. While this bug is being reported here first due to multiple conflicting plugins causing the behavior, it may not be caused by or fixable through Obsidian-tasks.

I appreciate your transparency here.

As noted in https://publish.obsidian.md/tasks/Support+and+Help/Report+a+Bug#Bug+involving+another+plugin:

We do not generally work on problems of Tasks interacting with other plugins unless the author of that plugin is willing to work jointly on the problem.

Other reports

Someone has logged it already:

CodeblockCustomizer, which has 19,000 downloads:

I'll pop a note in the first of those, seeing if the author wants to spend half an hour together investigating.

claremacrae commented 3 weeks ago

@ndit-dev Please try and reproduce it in a dataview code block.

That will be useful info... Thanks.

claremacrae commented 3 weeks ago

@ndit-dev Also please try and narrow down minimum requirements to reproduce the problem.

For example, is it signification that you have both the task and query in the same note?

Or, what happens when they are in separate notes - is there still a problem? If so, what modes (Source, Live Preview, Reading) would those notes need to be in, to reproduce the problem?

claremacrae commented 3 weeks ago

Is it also significant that you have more tasks after the Tasks code block?

ndit-dev commented 3 weeks ago

Hi Claremacrae, thanks for looking into this. I understand that this issue is particularly difficult to troubleshoot, as it's caused by interactions with other plugins. Great find on the bug report with CodeStyler—I had only looked into the reports for CodeblockCustomizer since that's the one I usually use.

Please try and reproduce it in a dataview code block. That will be useful info... Thanks.

I wasn’t able to reproduce this with dataview. In fact, I was using dataview queries as a workaround until I started using recurring tasks, where the native tasks query is required. That's when I began to investigate the issue more closely.

For example, is it significant that you have both the task and query in the same note? Or, what happens when they are in separate notes—is there still a problem? If so, what modes (Source, Live Preview, Reading) would those notes need to be in to reproduce the problem? Is it also significant that you have more tasks after the Tasks code block?

It's not significant where the tasks are placed in relation to the query; they don't even need to be in the same note or visible in the query filter. The core issue isn’t with task editing itself—it's with the query loading. The problem just becomes more apparent when you edit a task in the same note since doing so causes the query to reload, which in turn makes the block flicker.

The issue is visible even when you simply open a note containing just a tasks query. However, it will only flicker once during the initial load of the note. This becomes more noticeable if the task list in the query is large. Any change to a task—such as editing, adding, or removing a task in another note—will cause it to flicker in this case. Even marking a task as done within the query will trigger this behavior.

As for which modes this occurs in, I’ll need to double-check. I typically work in live preview mode, and that's the only mode I've tested this in so far. I'm on my phone right now, but I'll check tomorrow.

ndit-dev commented 3 weeks ago

The visual bug and flicker is indeed only happning in editing mode, in reading mode it works perfectly and as intended.

Here is a screen recording that better visualizes that it's the query loading that is acting up. Here i first switch between two notes, then enable one of the plugins and do the same thing again to illustrate the differense. Obsidian_S8I8rXwSiu

claremacrae commented 2 weeks ago

@mugiwara85 and I spent around 1.5 hours on this today...

My notes from this:

Tasks plugin experiments

What is the behaviour of Tasks plugin when Codeblock Customizer is enabled?

Markdown task lines rendered in Reading mode

Editing any single task line causes them all to be redrawn
This is especially noticeable if the user has Tasks configured to hide the global filter, as
- all the tasks in the file containing the edited task get redrawn quickly with the global query displayed
- then they get redrawn one at a time, with the global query removed
These redraws take place immediately after the edits are made
It does not matter whether the edits were made in Source mode or Live Preview

Markdown task lines rendered in Live Preview

No observable change in rendering of task lines in Live Preview

Tasks query blocks, in Reading mode and Live Preview

Suppose a Tasks code block is displaying 9 tasks, and then a user edits one a task anywhere in the vault (regardless of whether the task is shown in the query or not)
- When the edited file is saved (either by the user doing Ctrl/Cmd S, or the Obsidian 2-second save cycle being reached)...
- The 9 tasks are added to the existing 9 tasks in the search results, one at a time, until 18 tasks are displayed
- Then the 18 tasks are cleared, and the 9 new tasks remain displayed

Video of the above observations:

https://github.com/user-attachments/assets/5c9cbf17-145d-4645-9fe9-e5e6e02910de

Does updating the Tasks plugin to the latest Obsidian API fix the problem?

We noticed that tasks is using the deprecated MarkdownRenderer.renderMarkdown() instead of MarkdownRenderer.render()
So we update Tasks from Obsidian API 1.2.5 to the latest which is currently 1.6.6, in case MarkdownRenderer.render() fixed the problem.
- This involved disabling a few Tasks callback free-functions in QueryRenderer.ts
No, It did not fix these rendering issues.

Codeblock Customizer

Codeblock Customizer has a setting to disable its processing of particular code blocks.
However, adding tasks to the exclusion list does not fix this problem.
Codeblock Customizer has two different areas of code to modify Obsidian rendering
- "Reading Mode"-post-processing changes - which apply to Reading Mode and Live Preview
  - When we disabled just this code, the Tasks problem remained
- "Callout" post-process changes - which only apply to callouts, in Reading Mode and Live Preview
  - When we disabled just this code, the Tasks problem disappeared, suggesting that the problem code is in this area
  - Interestingly, the slow redrawing of Task source lines still occurred, even though they are not in callouts.
  - So somehow the "Callout" post-processing code is affecting the rendering of Markdown task lines outside of callouts.

ndit-dev commented 2 weeks ago

I can confirm that everything mentioned under "What is the behaviour of Tasks plugin when Codeblock Customizer is enabled?" above aligns with my testing to. Good and thorough description of the behavior 👍

claremacrae commented 1 week ago

@mugiwara85 has identified the location of the problem - see https://github.com/mugiwara85/CodeblockCustomizer/issues/96#issuecomment-2323337785.

The next challenge is to find the solution - but this confirms it isn't a problem with the Tasks code, so I'm closing this ticket.

obsidian-tasks-group / obsidian-tasks