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

Chrome 130 doesn't generate correct PDF slides for Marp themes with the text-shadow and custom background #619

Open
polarnik opened this issue Nov 10, 2024 · 1 comment
Labels
upstream Caused in upstream, not in this repo

Comments

@polarnik
Copy link

Version of Marp Tool

@marp-team/marp-cli v4.0.0 (w/ @marp-team/marp-core v4.0.0)

Operating System

macOS

Environment

  • OS version: macOS Sonoma 14.5
  • Node.js version: Marp CLI 4.0.0, Node.js v22.10.0
  • Chrome: Version 130.0.6723.117 (Official Build) (arm64)

How to reproduce

  1. Create a theme with the text-shadow effect, like
:root {
    --bg-color: #000000;
}
section {
    text-shadow: 1px 1px 5px var(--bg-color), 0px 0px 5px var(--bg-color), 1px 2px 10px var(--bg-color), -1px -1px 10px var(--bg-color), 2px 3px 10px var(--bg-color);
 }
  1. Generate HTML slides

  2. Generate PPTX slides

  3. Generate JPEG slides

  4. Generate PDF slides

  5. Create a theme with the text-shadow effect and some background color or background image, like

:root {
    --bg-color: #000000;
    --blue: rgb(84, 104, 237);
    --green: rgb(211, 221, 80);
}
section {
    text-shadow: 1px 1px 5px var(--bg-color), 0px 0px 5px var(--bg-color), 1px 2px 10px var(--bg-color), -1px -1px 10px var(--bg-color), 2px 3px 10px var(--bg-color);
 }
strong {
    background-color: var(--blue);
    font-style: normal;
}
em {
    background-color: var(--green);
    color: var(--bg-color);
    font-style: normal;
}
  1. Generate HTML slides
  2. Generate PPTX slides
  3. Generate JPEG slides
  4. Generate PDF slides

Expected behavior

3-6. Texts will have a small shadow, but not the strong solid background
8-11. Texts will have a small shadow, but not the strong black background

Actual behavior

3-6. Texts have a small shadow for HTML, PPTX, JPEG, PDF formats
8-10. Texts have a small shadow for HTML, PPTX, JPEG formats

image
  1. Texts have the strong black solid background for the PDF format
image

Additional information

It is a Chrome issue. It worked well two years ago with Chrome 100, but not now.
The workaround is -- don't use background-image or background-color with the text-shadow. I don't use the text-shadow anymore, because I would like to use some backgrounds

@yhatt
Copy link
Member

yhatt commented Nov 10, 2024

It's a known bug of Mac's PDF rendering, such as Preview.app, Quick Look in Finder, and so on. Check out this issue:
https://issues.chromium.org/issues/41476907

The rendered PDF should show as usual in third party PDF viewers like Adobe Acrobat, Google Chrome (pdf.js), etc.

<style>
:root {
    --bg-color: #000000;
}
section {
    text-shadow: 1px 1px 5px var(--bg-color), 0px 0px 5px var(--bg-color), 1px 2px 10px var(--bg-color), -1px -1px 10px var(--bg-color), 2px 3px 10px var(--bg-color);
 }
 </style>

# Hello
marp markdown.md --pdf

Output PDF

Mac Preview.app Adobe Acrobat
Mac Preview.app Adobe Acrobat

Marp cannot fix that because it is caused by upstream.

@yhatt yhatt added the upstream Caused in upstream, not in this repo label Nov 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
upstream Caused in upstream, not in this repo
Projects
None yet
Development

No branches or pull requests

2 participants