Pdf rendering don't render linear gradient but png export works

[yodatak]

Describe the bug When i export my pdf i don't have the same ouput as the web output, gradient are broken

To Reproduce

1.Create a new slide with

---
# try also 'default' to start simple
theme: academic
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# some information about your slides, markdown enabled
title: Linux
info: |
  ## XXXXX

# author field for exported PDF
author: XXXXXXX

# https://sli.dev/custom/highlighters.html
highlighter: shiki

monaco: true
# Where to load monaco types from, can be 'cdn', 'local' or 'none'
monacoTypesSource: local

# https://sli.dev/guide/drawing
drawings:
  persist: false
# slide transition: https://sli.dev/guide/animations#slide-transitions
transition: slide-left
# enable MDC Syntax: https://sli.dev/guide/syntax#mdc-syntax
mdc: true

fonts:
  sans: Roboto
  serif: Roboto Slab
  mono: Fira Code

addons:
  - slidev-addon-asciinema
  - prettier-plugin-slidev
---

# XXXXX

---
transition: fade-out
---

# Prérequis

- XXXXXXXXXXX [TXX](XXXXXXXXXXX)
- X `XXX`
- XXX ! 🎉

---
layout: image-left
image: ./homepage-overview-diagram-new.svg
backgroundSize: contain
---

# Openstack

XXX **XXXXX** sXXXX

XXX **XXX** <ic-baseline-wind-power /> XXXXXXXXXXXXXXXT <mdi-counter />


---

<style>
 h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

</style>

# My title

XXXX

<http://XXX/>

<twemoji-warning /> XXX :/

- XX: `XX`

- XXX

2. pnpm run export --dark

Desktop (please complete the following information):

• OS: Fedora 40
• Browser: Firefox
• Slidev version: my package.json

{
  "name": "linux",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "npx slidev build",
    "dev": "npx slidev --open",
    "export": "npx slidev export slides*.md"
  },
  "dependencies": {
    "@iconify-json/carbon": "^1.1.33",
    "@iconify-json/devicon-plain": "^1.1.40",
    "@iconify-json/fa": "^1.1.8",
    "@iconify-json/heroicons": "^1.1.21",
    "@iconify-json/ic": "^1.1.17",
    "@iconify-json/logos": "^1.1.42",
    "@iconify-json/mdi": "^1.1.66",
    "@iconify-json/noto": "latest",
    "@iconify-json/simple-icons": "1.1.101",
    "@iconify-json/twemoji": "^1.1.15",
    "@iconify-json/uim": "^1.1.9",
    "@iconify-json/vscode-icons": "1.1.33",
    "@slidev/cli": "^0.49.3",
    "@slidev/theme-default": "^0.25.0",
    "slidev-theme-academic": "^1.3.0",
    "vue": "^3.4.27"
  },
  "devDependencies": {
    "playwright-chromium": "^1.44.0",
    "prettier": "3.2.5",
    "prettier-plugin-slidev": "^1.0.5"

  },
  "packageManager": "[email protected]"
}

The bad pdf rendering here slides_copy-export.pdf

The good web rendering

The png export is good

[kermanx]

Noticed this. I think the reason may be the PDF viewer doesn't support background-clip.

[mocdaniel]

I can confirm this behavior, in my case, linear gradient backgrounds are broken for both PNG and PDF exports.

[kermanx]

AFAIK this is caused by either the browser or the PDF viewer, which has nothing to do with Slidev itself. Also, the new browser exporter may resolve this, because it just uses your browser's builtin PDF printer.