[Bug]: JJ+ stopped rendering CSS when exporting to PNG (possibly other formats too)

[alexandernst]

Current versus expected behaviour

In JJ+3.x I was able to apply CSS styles to my elements and have them exported to PNG, but this doesn't seem to be working in JJ+4.x

Steps to reproduce

1. Go to https://codesandbox.io/p/sandbox/jj4-raster-bug-y9v98v?file=%2Fsrc%2Findex.mjs%3A14%2C29
2. Wait a couple of seconds and a popup will open (chrome might block the popup)
3. Compare the image in the popup with the paper

Version

4.0.3

What browsers are you seeing the problem on?

Chrome, Safari

What operating system are you seeing the problem on?

Mac

[alexandernst]

Extra bug: This code doesn't work in Safari 17.4.1 if opened in "private browsing". It works when opened in "normal mode".

[kumilingus]

EDIT: Please ignore this. We have never changed the default.

It needs to be investigated.

• The fill of the <text/> is ok in the export, but the flll of the <rect/> is missing.
• It's actually a problem with format.SVG (and not format.Raster).

Dev note: It could be related with jQuery removal

---

The default of useComputedStyles has changed from true to false (because paper has no external CSS in v4).

You need to explicitly enable it now.

openAsPNG(paper, { useComputedStyles: true });

[kumilingus]

It's a bug. Using grid: false combined with useComputedStyles: true does not work.

Here's a workaround for the time being:

openAsPNG(paper, {
      grid: true,
      stylesheet: `
          .joint-grid-layer { display: none; }
      `
});

[alexandernst]

I can confirm that the workaround works!
Regarding the Safari issue, any clue why could it be happening?

[kumilingus]

I can't reproduce it on Safari v17.4.1 (both your example and KitchenSink application work as expected).

[alexandernst]

Let me see if I can reliably repro the bug in another machine. Maybe my environment has something buggy

[kumilingus]

We are able to reproduce it now. Thank you. We will look into it.