Skip to content

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

@polarnik

Description

@polarnik

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    upstreamCaused in upstream, not in this repo

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions