Skip to content

CSS masks are not applied correctly when exporting to PDF #4829

@gixbo

Description

@gixbo

Renderer

v3

Browser

Chrome

Operating System

MacOS

What happened?

mask: exclude works correctly in the browser, but fails during PDF export. The masked area becomes fully filled instead of preserving the gradient border.

browser:
Image

pdf:
Image

Code

.sageAdvice{

    border:2px solid #49544F;
    box-shadow:inset 0 0 49px 1px rgba(168, 176, 160, 0.35);
}

  .sageAdvice::after{

   content: "";
  position: absolute;

  padding: 4px; 
  margin-top:-1px;
  background: linear-gradient(135deg, #5F756C 0%,#6D7A73 12%, #7E6856 25%,#7E6856 75%,#5F756C 90%,#7E6856 100%);
 mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
    box-shadow:none;
    border:none;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions