pdf.js rendering issue with linear-gradient

[GautierLePire]

pdf.js (Firefox's default pdf engine) doesn't render page corners of the uncover theme.

> marp slides.md -o slides.pdf

Firefox:

Chrome:

Current workaround: I've replaced the linear gradient with a svg image.

uncover.scss:14

  &::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="100" height="100"><path d="M0 100h100v-100Z" fill="' + rgba($text, 0.05) + '"/></svg>');
    background-size: 100%;
    color: $text;
    text-shadow: 0 0 5px $bg;
  }

It now works in both Chrome and Firefox, but I have not tested on other pdf readers.

[yhatt]

Thanks for reporting! A similar issue that seems to be the same cause has reported to https://github.com/mozilla/pdf.js/issues/10572, and this issue would be enhanced the evidence of that report.

A workaround via inline SVG is so nice. I tested in Chrome, Firefox, Adobe Acrobat, and macOS Preview. These are working perfectly.

I updated background declaration to give more compatibillity with the tweaked style. We would use in uncover theme if no problems.

&::after {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1 1" width="1" height="1"><path d="M0 1h1v-1Z" fill="#{rgba($text, 0.05)}"/></svg>') no-repeat center center;
  background-size: cover;
}

[yhatt]

Now Marp Core v0.9.0 has shipped with SVG workaround for uncover theme. 🚢