Producing different results in reading / preview mode

[KosmosisDire]

I am making a simple diagram like this:

However when exporting to a PDF or in reading mode it looks like this:

This is the code I am using to generate it:

% 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:$A$}] (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}

I am unsure if this is actually a problem with the plugin, or with tikzjax, or with obsidian. I am hoping this is something that could be resolved though.

In this case it seems to be like the \clip command isn't being run in reading mode / when being exported to PDF, which suggests something wrong on the obsidian / plugin side rather than a problem with tikzjax.

Let me know if you need more info, or if I can help :)

[KosmosisDire]

Depending on why this is happening, a work around could be to use the cached image from preview mode even in read mode, instead of re-rendering it in read mode.

[artisticat1]

Thanks for the detailed report! This is strange, since the cached, correct image is used in reading mode. Images aren't re-rendered when the user switches to reading mode (you can see this because the spinning icon that is displayed while a diagram is being rendered doesn't show up, and the image loads instantly).

I can look into this when I have the time.

[KosmosisDire]

Ah okay, I think it may actually be mixing up the cached files. I have three similar diagrams in my document:

Here they are in edit mode:

It seems the third one is being loaded as the first one in reading mode:

[KosmosisDire]

However later in the page I have two more diagrams:

In edit mode:

However the first one here, in reading mode, gets messed up and there are no other images like it. So maybe that theory is incorrect...

[thejamesm]

I'm experiencing a similar issue: \clip tags aren't being properly observed in reading view, with their contents projecting out of the tikzpicture and over and under other page elements.

Edit view:

Reading view:

The code for this portion of the document is as follows:

$$
\begin{align}
  AEIH + IFCG &= 2 \cdot HIGD - \frac{Circle}{2} \\[8pt]
  &= 2 \cdot 16 - \frac{Circle}{2} \\[8pt]
  &= 32 - \frac{Circle}{2}
\end{align}
$$

```tikz
\begin{document}
  \begin{tikzpicture}
    \coordinate[label=above left:{\Large $E$}] (E) at (0,4);
    \coordinate[label=above right:{\LARGE $B$}] (B) at (4,4);
    \coordinate[label=below right:{\Large $F$}] (F) at (4,0);
    \coordinate[label=below left:{\LARGE $I$}] (I) at (0,0);
    \draw[<->] ([yshift=+1cm]E) -- ([yshift=+1cm]B) node[midway, above]{4};
    \draw[<->] ([xshift=-1cm]E) -- ([xshift=-1cm]I) node[midway, left]{4};
    \begin{scope}
      \clip (E) rectangle (F);
      \fill[fill=blue!50,even odd rule] (E) rectangle (F) (E) circle (4) (F) circle (4);
    \end{scope}
    \draw[thick] (B) arc(90:180:4) (I) arc(270:360:4);
    \draw[thick] (E) -- (B) -- (F);
    \draw[thick,dashed] (E) -- (I) -- (F) (I) -- (B);
  \end{tikzpicture}
\end{document}

\begin{document}
  \begin{minipage}{5.5cm}
    \begin{tikzpicture}
      \coordinate[label=above left:{\Large $E$}] (E) at (0,4);
      \coordinate[label=above right:{\LARGE $B$}] (B) at (4,4);
      \coordinate[label=below right:{\Large $F$}] (F) at (4,0);
      \coordinate[label=below left:{\LARGE $I$}] (I) at (0,0);
      \fill[fill=blue!50] (I) arc (270:360:4);
      \draw[thick] (I) arc (270:360:4);
      \draw[thick] (E) -- (B) -- (F);
      \draw[thick,dashed] (E) -- (I) -- (F) (I) -- (B);
    \end{tikzpicture}
  \end{minipage}
  \begin{minipage}{0.5cm}
    \Large$=$
  \end{minipage}
  \begin{minipage}{5.5cm}
    \begin{tikzpicture}
      \coordinate[label=above left:{\Large $E$}] (E) at (0,4);
      \coordinate[label=above right:{\LARGE $B$}] (B) at (4,4);
      \coordinate[label=below right:{\Large $F$}] (F) at (4,0);
      \coordinate[label=below left:{\LARGE $I$}] (I) at (0,0);
      \begin{scope}
        \clip (E) rectangle (F);
        \fill[fill=blue!50] (E) circle (4);
      \end{scope}
      \draw[thick] (I) arc (270:360:4);
      \draw[thick] (E) -- (B) -- (F);
      \draw[thick,dashed] (E) -- (I) -- (F) (I) -- (B);
    \end{tikzpicture}
  \end{minipage}
  \begin{minipage}{0.5cm}
    \Large$-$
  \end{minipage}
  \begin{minipage}{5.5cm}
    \begin{tikzpicture}
      \coordinate[label=above left:{\Large $E$}] (E) at (0,4);
      \coordinate[label=above right:{\LARGE $B$}] (B) at (4,4);
      \coordinate[label=below right:{\Large $F$}] (F) at (4,0);
      \coordinate[label=below left:{\LARGE $I$}] (I) at (0,0);
      \fill[fill=blue!50] (I) -- (B) -- (E) -- cycle;
      \draw[thick] (I) arc (270:360:4);
      \draw[thick] (E) -- (B) -- (F);
      \draw[thick,dashed] (E) -- (I) -- (F) (I) -- (B);
    \end{tikzpicture}
  \end{minipage}
\end{document}

\begin{document}
  \begin{minipage}{6cm}
    \begin{tikzpicture}
      \coordinate[label=above left:{\Large $E$}] (E) at (0,4);
      \coordinate[label=above right:{\LARGE $B$}] (B) at (4,4);
      \coordinate[label=below right:{\Large $F$}] (F) at (4,0);
      \coordinate[label=below left:{\LARGE $I$}] (I) at (0,0);
      \fill[fill=blue!50] (B) arc (90:180:4);
      \draw[thick] (B) arc (90:180:4);
      \draw[thick] (E) -- (B) -- (F);
      \draw[thick,dashed] (E) -- (I) -- (F) (I) -- (B);
    \end{tikzpicture}
  \end{minipage}
  \begin{minipage}{1cm}
    \Large $=$
  \end{minipage}
    \begin{minipage}{6cm}
    \begin{tikzpicture}
      \coordinate[label=above left:{\Large $E$}] (E) at (0,4);
      \coordinate[label=above right:{\LARGE $B$}] (B) at (4,4);
      \coordinate[label=below right:{\Large $F$}] (F) at (4,0);
      \coordinate[label=below left:{\LARGE $I$}] (I) at (0,0);
      \fill[fill=blue!50] (I) arc (270:360:4);
      \draw[thick] (I) arc(270:360:4);
      \draw[thick] (E) -- (B) -- (F);
      \draw[thick,dashed] (E) -- (I) -- (F) (I) -- (B);
    \end{tikzpicture}
  \end{minipage}
\end{document}

After a bit of investigation, it would appear that the crux of the issue is that `<clipPath>` elements in `div.markdown-source-view` are influencing `div.markdown-reading-view` somehow. If I use Source Inspector to delete a `<clipPath>` from `div.markdown-source-view` while in reading mode, the respective render error disappears. Deleting the `<path>` within that `<clipPath>` has no effect; neither does removing the equivalent `<clipPath>` from `div.markdown-reading-view`. I tried tinkering with the CSS of various elements, but I didn't have any joy there. Removing even-odd fill-rule properties didn't seem to help, either.

The SVG in both views matches exactly, and there doesn't seem to be any relevant difference between their computed CSS (it's all inherited text properties). It seems odd that these `<clipPath>` elements can have an influence when their ancestor `<div>` is set to `display: none`. Perhaps it's a bug in Chromium?