slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
32.82k stars 1.33k forks source link

shadows under some particular elements when exporting as pdf #1784

Closed zillionare closed 2 months ago

zillionare commented 2 months ago

Describe the bug

when I exported it as pdf, some elements has shadows under itself.

image

the web page works as expected:

image

If I view this PDF on my phone, the display is normal.

Minimal reproduction

the layout.css:

:root {
    --slidev-theme-primary: #404040;
    /* --slidev-theme-secondary: #E60000; */
    --slidev-theme-secondary: #606060;
    --slidev-background-color: #fcfcfc;
    font-family: ZhuqueFangsong, sans-serif !important;

    .abs {
        position: absolute;
    }

}

.slidev-layout {
    text-justify: inter-character;
    text-align: justify;
    @apply h-full text-left text-$slidev-theme-primary;

    p+h2,
    ul+h2,
    table+h2 {
        @apply mt-10;
    }

    h1 {
        font-size: 6.3vw;
        color: var(--slidev-theme-secondary);
        margin: 9vw 0;
        line-height: 8vw;
        ;
    }

    h2 {
        text-align: left;
        font-size: 4.5vw;
        font-weight: 500;
        margin: 6.4vw 0vw;
        padding: 0.5vw 1vw;
        /* counter-increment: section; */
    }
}

omitted the rest since h2 already causes the problem.

Environment

KermanX commented 2 months ago

I think this can't be fixed by editing Slidev's code.

There is some chance that changing a PDF viewer will fix this.

zillionare commented 2 months ago

Verified it's PDF viewer. When viewing in firefox, it all looks well.

I'll try workaround here:

https://github.com/slidevjs/slidev/issues/1236

Thanks @KermanX