Visual bug with CairoMakie in Notebooks

Hi,

I think I found a very specific rendering bug when using CairoMakie and Julia Notebooks.

Running the following code in successive notebook cells produces the rendering error in the second plot. The orange line in the second plot doesn’t fully render above some limit.

using CairoMakie
CairoMakie.activate!(type="svg")

f = Figure()
Axis(f[1,1], title="First Plot - no error")
lines!(randn(10).+10)
lines!(randn(10), linewidth=2)
f

f = Figure()
Axis(f[1,1], title="Second Plot - rendering error")
lines!(randn(10))
lines!(randn(10), linewidth=2)
f

Note that the above images are screenshots of the editor (VSCode). When I export the plot or even use the plot viewer, the plots are correctly rendered.

Some other things that appear to ‘fix’ the problem:

  • Setting linewidth=1 for either plot. Linewidths greater than 1 seem to cause this bug.
  • Removing .+10 from the first lines! call, which reduces the y-axis range to be the same as the second plot.
  • Using GLMakie, or using CairoMakie in “png” mode.

Weirdly, if I make one of the above changes to the first cell, the second plot corrects itself automatically.

Any ideas on what’s going on?

I tried a couple of things:

  1. Copying the output of the second cell to a file. The resulting svg looks normal
  2. Removing the title. No difference. (still cuts off)
  3. Turning all axis plots invisible (i.e. hiding the axis). No difference.
  4. Removing all axis plots, i.e. deleting everything in f.scene.plots and removing the mesh from ax.scene.plots. Still no difference
  5. Plotting to an LScene instead of Axis. The resulting lines are cut off less often, either towards the bottom or top. It looks like they sometimes try to draw outside their designated area. This happens for both figures in this case.
  6. Plotting to a plain Scene with show_axis = false. No issues here.
  7. Displaying ax.scene. No issues here. (Even if displaying f or f.scene doesn’t work correctly.)
  8. Using just the second plot - no issues
  9. Using the second plot in two cells - rarely breaks
  10. I checked for duplicate ids in the notebook because that seems to have been an issue before. I found clip1 and surface1 being used for both figures, with and without rendering issues.

It would be good to open an issue for this on github.

Looks to me like a clipping area is drawn at the wrong location. As this issue does not happen with png we can exclude wrong logic in CairoMakie. As svg clipping masks are created as id’ed paths as far as I know, there is probably something weird going on there, maybe the wrong path is chosen as clipping path. Maybe my id salting code for svg is buggy and it messes something up there. Or something in the svg escaping code of vscode

I’ve opened an issue on the Makie Github.