gridbugs icon indicating copy to clipboard operation
gridbugs copied to clipboard

Repeat notation with a track listing and a grid-gap calculates incorrectly at Webkit/Blink

Open kizu opened this issue 7 years ago • 0 comments

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)

kizu avatar Feb 21 '18 14:02 kizu