gridbugs
gridbugs copied to clipboard
Repeat notation with a track listing and a grid-gap calculates incorrectly at Webkit/Blink
In Webkit & Blink, if we have something like
.grid {
repeat(auto-fill, minmax(64px, 1fr) minmax(64px, 1fr));
grid-gap: 1em;
}
Or: repeat()
with an auto-fill
/auto-fit
, multiple minmax()
and a grid-gap
cause overflow due to incorrect grid items' widths computations. The bigger the grid-gap
, the bigger the problem.
- Bug in webkit tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1341507
- Bug in blink tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=813511
Test case: https://codepen.io/kizu/pen/paayMm?editors=1100 (appears not on every viewport width, could need to be resized)