[Cards] Even column count cards bug

[wdmeest]

Bug Report

When you add an even number of columns to the cards group, that is within a grid div, the number of cards in a row does not match the number of columns of the cards group

Steps to reproduce

1.Create grid element with two columns, example one with a twelve wide and four wide column

2. Add cards group (with an even number of column count, example two, four, six, ...) within the grid column element

Expected result

When card column count is four, we expect to see 4 cards on one row

Actual result

When card column count is four, we see 3 cards on one row

Testcase

https://jsfiddle.net/91rcvu7e/

Version

2.9.3

[GammaGames]

I see it in Firefox (it's also really flickery when you resize the window):

But not Chrome:

Weird!

[lubber-de]

This also happens when not using FUI. Firefox seems to wrongly calculate the width calc(25% - 1em) in some cases. I filed an issue using a minimum html/CSS example at https://github.com/webcompat/web-bugs/issues/136609

Minimal test case without FUI https://jsfiddle.net/lubber/qcght26s/9/

[lubber-de]

I just tried the same jsfiddle using an older firefox version (115) and the issue does not exist there, so it's definately something the firefox developers have to fix

[lubber-de]

Closing for now as i dont know how to fix this inside FUI until FF fixes it in their engine (just removing the - 1em from the calc function would mess up the whole margins... just tried

[lubber-de]

I also filed a bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1895485

[lubber-de]

Issue is fixed in next Firefox Release

[wdmeest]

Thxs for the follow up!