Skip to content

Export PDF error when containing HTML block #10814

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

Closed
Vanessa219 opened this issue Apr 1, 2024 · 0 comments
Closed

Export PDF error when containing HTML block #10814

Vanessa219 opened this issue Apr 1, 2024 · 0 comments
Assignees
Labels
Milestone

Comments

@Vanessa219
Copy link
Member

包含一下 html 块时,导出 PDF 错误

<div>
<style>
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
  background: hsl(0 0% 0%);
  gap: 2rem;
}
body::before {
	--line: hsl(0 0% 95% / 0.25);
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
	mask: linear-gradient(-15deg, transparent 30%, white);
	top: 0;
	z-index: -1;
}
section {
  display: grid;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}
section p {
  margin: 0;
  font-size: 2.25rem;
  color: hsl(0 0% 40%);
  text-align: center;
  background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));
  color: transparent;
  background-clip: text;
}
.code {
  font-size: 3rem;
  display: flex;
  flex-wrap: nowrap;
  color: hsl(0 0% 100%);
  border-radius: 1rem;
  background: hsl(0 0% 6%);
  justify-content: center;
  box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
}
.code:hover {
  cursor: grab;
}
.digit {
  display: flex;
  height: 100%;
  padding: 5.5rem 1rem;
}
.digit:focus-visible {
  outline-color: hsl(0 0% 50% / 0.25);
  outline-offset: 1rem;
}
.digit span {
  scale: calc(var(--active, 0) + 0.5);
  filter: blur(calc((1 - var(--active, 0)) * 1rem));
  transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
}
ul {
  padding: 0;
  margin: 0;
}
.digit:first-of-type {
  padding-left: 5rem;
}
.digit:last-of-type {
  padding-right: 5rem;
}
:host {
  --lerp-0: 1; /* === sin(90deg) */
  --lerp-1: calc(sin(50deg));
  --lerp-2: calc(sin(45deg));
  --lerp-3: calc(sin(35deg));
  --lerp-4: calc(sin(25deg));
  --lerp-5: calc(sin(15deg));
}
.digit:is(:hover, :focus-visible) {
  --active: var(--lerp-0);
}
.digit:is(:hover, :focus-visible) + .digit,
.digit:has(+ .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-1);
}
.digit:is(:hover, :focus-visible) + .digit + .digit,
.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-2);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-3);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-4);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-5);
}
</style>
<section>
  <p>Glide To Reveal Secret Code</p>
  <ul class="code">
    <li tabindex="0" class="digit">
      <span>0</span>
    </li>
    <li tabindex="0" class="digit">
      <span>3</span>
    </li>
    <li tabindex="0" class="digit">
      <span>4</span>
    </li>
    <li tabindex="0" class="digit">
      <span>8</span>
    </li>
    <li tabindex="0" class="digit">
      <span>7</span>
    </li>
    <li tabindex="0" class="digit">
      <span>2</span>
    </li>
  </ul>
</section>
</div>
@Vanessa219 Vanessa219 added this to the 3.0.6 milestone Apr 1, 2024
@88250 88250 changed the title Export pdf error Export PDF error when containing HTML block Apr 1, 2024
88250 added a commit to 88250/lute that referenced this issue Apr 1, 2024

Verified

This commit was signed with the committer’s verified signature. The key has expired.
jacogr Jaco
88250 added a commit that referenced this issue Apr 1, 2024

Verified

This commit was signed with the committer’s verified signature.
woss Daniel Maricic
Vanessa219 added a commit that referenced this issue Apr 1, 2024
Vanessa219 added a commit that referenced this issue Apr 1, 2024
@88250 88250 closed this as completed Apr 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants