Color inversion only sometimes being applied

[dakaidan]

I have a series of diagrams using tikz-cd. Some are always rendered correctly, however, some have their colors inverted in preview mode, while in reading mode they appear to not be inverted.

In preview mode:

In reading mode:

The tex for the diagrams is:

\usepackage{tikz-cd}
\usetikzlibrary{automata, arrows.meta, positioning}

\tikzstyle{accepting}=[double distance=4pt, outer sep=1pt+\pgflinewidth]

\begin{document}

\begin{tikzpicture} [node distance = 5cm, on grid, auto, scale=1, every node/.style={scale=1.3}]

    \node (qinit) [state, initial] {$q_{init}$};
    \node (qaccept) [state, accepting, right = of qinit] {$q_{accept}$};
    \node (qreject) [state, accepting, below = of qinit] {$q_{reject}$};
    \node (q1) [state, right = of qreject] {$q_1$};
    \node (q2) [state, below = of qreject] {$q_2$};
    \node (q3) [state, left = of qreject] {$q_3$};

\path[-stealth, thick]
    (qinit) edge node {$\sqcup / \sqcup / \to$} (qaccept)
    (qinit) edge[bend left] node [swap] {$b / \sqcup / \to$} (qreject)
    (qinit) edge[controls={+(3,-2) and +(0,4)}] node {$a/\sqcup/\to$} (q1)
    (q1) edge[loop right] node {$a/a/\to$} ()
    (q1) edge[loop left] node {$b/b/\to$} ()
    (q1) edge[bend left] node {$\sqcup / \sqcup / \leftarrow$} (q2)
    (q2) edge[bend right] node [swap] {$\sqcup / \sqcup / \to$} (qreject)
    (q2) edge[bend left] node {$a / \sqcup / \to$} (qreject)
    (q2) edge[bend left] node {$b / \sqcup / \leftarrow$} (q3)
    (q3) edge[loop right] node {$b/b/\leftarrow$} ()
    (q3) edge[loop left] node {$a/a/\leftarrow$} ()
    (q3) edge[bend left] node {$\sqcup / \sqcup / \to$} (qinit);

\end{tikzpicture}
\end{document}

I'm also getting this issue with all examples shown on this repository, although, some of my diagrams have never had an issue, dispute being fairly similar, such as:

\usepackage{tikz-cd}
\usetikzlibrary{automata, arrows.meta, positioning}

\tikzstyle{accepting}=[double distance=4pt, outer sep=1pt+\pgflinewidth]

\begin{document}

\begin{tikzpicture} [node distance = 3cm, on grid, auto, scale=1, every node/.style={scale=1.3}]

    \node (q0) [state, initial, accepting, initial text = {start}] {$q_0$};
    \node (q1) [state, right = of q0] {$q_1$};
    \node (q2) [state, right = of q1] {$q_2$};

\path[-stealth, thick]
    (q0) edge[bend left] node {1} (q1)
    (q0) edge [loop above] node {0} ()
    (q1) edge[bend left] node {1} (q0)
    (q2) edge[bend left] node {0} (q1)
    (q2) edge [loop above] node {1} ()
    (q1) edge[bend left] node {0} (q2);
\end{tikzpicture}

\end{document}

and

\usepackage{tikz-cd}
\usetikzlibrary{automata, arrows.meta, positioning}

\tikzstyle{accepting}=[double distance=4pt, outer sep=1pt+\pgflinewidth]

\begin{document}

\begin{tikzpicture} [node distance = 5cm, on grid, auto, scale=1, every node/.style={scale=1.3}]

    \node (s) [state, initial] {$s$};
    \node (f) [state, below right = of s] {$f$};
    \node (q) [state, accepting, above right = of f] {$q$};

\path[-stealth, thick]
    (s) edge[bend left] node {a} (q)
    (s) edge[controls={+(1.5,0.1) and +(-2,-0.8)}] node {b} (q)
    (s) edge[bend left] node {b} (f)
    (f) edge[bend left] node {b} (s)
    (q) edge[bend left] node {a} (f)
    (f) edge[in=290, out=350, loop] node {a} ()
    (f) edge[in=190, out=250, loop] node {b} ();
\end{tikzpicture}

\end{document}

I'm not sure where the issue is, as I have also found that when altering certain parts of the tex such as setting \begin{tikzpicture} [color=white] the issue is resolved until the obsidian app is restarted. Similarly, changing \usepackage{tikz-cd} to \usepackage{tikz} and back resolves the issue until obsidian is restarted,

This is on the latest version of obsidian, and persists across Android, Windows, and Linux.

Please let me know if I can help or if there's any information I missed.

[KosmosisDire]

Looks like it could be related to this: https://github.com/artisticat1/obsidian-tikzjax/issues/12

[artisticat1]

Thank you for the detailed report!

Would you both be able to use the element inspector to inspect your SVG outputs in Live Preview mode and in Reading mode? The SVG output should be the same in both modes. If not, that points to an issue.

[KosmosisDire]

Hi, I can't find the SVG outputs anywhere in the inspector. I did check all the weird files names just to make sure. Maybe you could give more instruction on where to find that?

I did see the logs:

TikZJax: Rendering input:

aee28a13-7e4f-48fc-96f8-766bc185a51b:1 % Required packages
\usepackage{tikz}
\usetikzlibrary{backgrounds}
\begin{document}
\begin{tikzpicture}[thick,
set/.style = {circle,
minimum size = 3cm,
fill=orange},
background rectangle/.style={fill=orange}, show background rectangle]
% Set A
\node[set,label={135:$f$}] (A) at (0,0) {};
% Set B
\node[set,label={45:$B$}] (B) at (1.8,0) {};
% Intersection
\begin{scope}
\clip(0,0) circle(1.5cm);
\clip (1.8,0) circle(1.5cm);
\fill[white] (0,0) circle(1.5cm);
\end{scope}
% Circles outline
\draw (0,0) circle(1.5cm);
\draw (1.8,0) circle(1.5cm);
\end{tikzpicture}
\end{document}

VM184:1 This is e-TeX, Version 3.14159265-2.6 (preloaded format=latex 2022.5.1)
VM184:1 **entering extended mode
VM184:1 (input.tex
VM184:1 LaTeX2e <2020-02-02> patch level 2
VM184:1 (tikzlibrarybackgrounds.code.tex)
VM184:1 No file input.aux.
VM184:1 ABD: EveryShipout initializing macros [1] [2] (input.aux) )
VM184:1 Output written on input.dvi (2 pages, 5644 bytes).
VM184:1 Transcript written on input.log.

This log only showed when initially rendering in edit mode, and there was no re-render in reading mode, it was instantaneous. So it seems there would only be one SVG, and that would hint at a problem with the generated SVGs themselves, or with the way that obsidian is interpreting them. Most likely a problem with obsidian since it works fine in edit mode.

[dakaidan]

I'm assuming the SVGs are directly embedded in the HTML rather than being external files. When checking there, both the reading mode and edit mode have identical SVG outputs, I cant see if there are any differing styles but I don't immediately notice any.

[artisticat1]

Maybe you could give more instruction on where to find that?

Yep, I was referring to the SVGs embedded directly in the HTML. (Press Ctrl+Shift+I to open developer tools, then use Inspect Element and click on your diagram. You'll then be directed to the diagram's SVG in the HTML. From here you can right click the SVG element and Copy -> Copy outerHTML. This copies the SVG to your clipboard.)

So it seems there would only be one SVG, and that would hint at a problem with the generated SVGs themselves, or with the way that obsidian is interpreting them. Most likely a problem with obsidian since it works fine in edit mode.

It seems you're right about this (as @dakaidan and I can both confirm that the same SVG is used in reading and edit mode).

If I paste the reading mode SVG from #12 into an external viewer, the diagram is rendered correctly. So the problem isn't TikZJax producing bad output. Maybe the issue lies in a difference in CSS styling in reading and edit modes.

Also, it might be that you are each having separate issues; I'm able to reproduce #12, but not this issue (#15).

[KosmosisDire]

I was able to find the SVG and verify as well that the SVG itself isn't changing. So as for #12 I will post a bug report on the obsidian forums, since I think it's most likely a problem on the obsidian side. Thanks!

[Tikitikitikidesuka]

I'm having a very similar issue.

When the images get rendered in read mode, they are shown with the correct color. However, if I reload the file, the colors are no longer inverted. If after doing that I rerender an existing diagram or write a new one, it renders correctly while the others do not.

In regards to a previous comment:

Yep, I was referring to the SVGs embedded directly in the HTML. (Press Ctrl+Shift+I to open developer tools, then use Inspect Element and click on your diagram. You'll then be directed to the diagram's SVG in the HTML. From here you can right click the SVG element and Copy -> Copy outerHTML. This copies the SVG to your clipboard.)

There is a difference in my case, the extracted svg from a correct render is much smaller than one from an incorrect one. In my test, the correct one is 2013 bytes in size while the incorrect one is 5868 bytes. They both look the same though.

Here are the two extracted SVGs of the same diagram:

Here is the view when rendering the two diagrams:

Here when I reload the file:

And finally when I rerender the second diagram:

[artisticat1]

Thank you! Looking at your SVGs (and their sizes) confirms that the postProcessSvg function, which inverts colors and optimises the SVG outputs, is not being called.

However, I cannot reproduce this issue. When you say "reload the file", do you mean closing and re-opening the file? Or switching between Live Preview and Reading modes?

[Tikitikitikidesuka]

By reloading the file I mean closing and re-opening it in reading mode.

I had not tried using live preview before, but testing it now, all the circuits are rendered correctly. Even if I close the file and open it again.

I just have the problem in reading mode, and only after reloading the file after rendering.

[Chickenkeeper]

I've been having the same problem. I have a note with mutliple TikZ diagrams in it, and in Live Preview mode everything is fine but when I switch to Reading mode at least one of the diagrams usually doesn't get its colours inverted. How many don't render correctly, and which ones they are, seems random; it can be different every time I open the note or start Obsidian. I've tried clearing the cached svgs too to no effect.

My Obsidian version (and its installer's version) are the latest at the time of writing (1.3.5) and I'm on Windows 10, if that helps.

[Leo-Zarni01]

Hello, I am also having this problem. Are there any updates to this bug?

[mayurankv]

If anyone uses the pretty bibtex plugin, there is a conflict, see #48