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

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)
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 7
- Comments: 17 (5 by maintainers)
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.
@chahu yes this is a chromium bug, you can track it here https://bugs.chromium.org/p/chromium/issues/detail?id=1305997
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