html-to-image: 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

image

Current Behavior

image

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)

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 7
  • Comments: 17 (5 by maintainers)

Most upvoted comments

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

@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.

I also encountered this bug. The below codepen example might help test. Works on fine on latest Safari & Firefox, but is broken on latest Chrome (99.0.4844.51), I believe it works on previous Chrome versions. Probably a Chrome bug.

https://codepen.io/chahu/pen/NWXGqxm