CSS Grid broken on latest Chrome

The CSS Grid option grid-template-areas no longer works properly when converted to canvas on the latest version of Chrome (Version 99.0.4844.51).

Expected Behavior

Current Behavior

Steps To Reproduce

.card {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: auto 100px 100px;
  grid-template-areas: 
    "header header"
    "one two"
    "three four";
  justify-items: center;
}
.card h1 {
  grid-area: header;
}
.card .i1 {
  grid-area: one;
}
.card .i2 {
  grid-area: two;
}
.card .i3 {
  grid-area: three;
}
.card .i4 {
  grid-area: four;
}

<div class="card">
  <h1>Thesis Paper</h1>
  <div class="i1">A</div>
  <div class="i2">B</div>
  <div class="i3">C</div>
  <div class="i4">D</div>
</div>

https://jsfiddle.net/Lk94cwxz/4/

Environment

• html-to-image: 1.9.0
• OS: Windows, Ubuntu
• Browser: Version 99.0.4844.51 (Official Build) (64-bit)

[chahu]

Yes, this is still affecting the current version of Chrome. For anyone needing a workaround here’s one solution: https://codepen.io/chahu/pen/abqobdL

[chahu]

@chrisglein I can confirm your link does not render properly with “Chrome 104.0.5112.79 (Official Build) (64-bit)”. I’m guessing you could re-write your grid css to workaround this issue (maybe using grid-template-areas), but it does look like something is still broken with Chrome’s CSS grid implementation for your case.