Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
yodatak opened this issue May 20, 2024 · 1 comment
Open

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

yodatak opened this issue May 20, 2024 · 1 comment

Comments

@yodatak
Copy link

yodatak commented May 20, 2024

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

  1. 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": "pnpm@8.15.5"
}

The bad pdf rendering here
slides_copy-export.pdf
image

The good web rendering
image

The png export is good

003

@KermanX
Copy link
Member

KermanX commented May 21, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants