This is really obscure, but easy enough to fix. Throwing this in Olivero, since that's the only place in core that uses IE CSS Grid syntax.

The problem is that the combination of autoprefixer and PostCSS Calc is generating invalid IE compatible grid syntax. But... it only does that when there's a calc() function nested inside a repeat() function.

From the following source code:

grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));

It will generate the following invalid IE compatible CSS

-ms-grid-columns: (minmax(0, 1fr))10]

The problem with the above code is that it's missing a beginning square bracket [ before the last number (10).

It should be

-ms-grid-columns: (minmax(0, 1fr))[10]

I'm honestly not sure in which plugin the problem lies. I've searched GitHub issues and came up empty. I think the easiest fix is to manually enter in the CSS grid syntax where necessary.

Comments

mherchel created an issue. See original summary.

mherchel’s picture

Status: Active » Needs review
StatusFileSize
new469.88 KB
new2.43 KB

Patch attached.

gauravvvv’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new130.18 KB
new212.41 KB

This issue is only browser-specific to IE. Now working fine on IE 11 after the patch.

Adding chrome and IE screenshot after the patch.

Marking as RTBC.

lauriii’s picture

The workaround looks fine. Have we identified where the problem is so that we could report it upstream?

lauriii’s picture

Status: Reviewed & tested by the community » Needs review

Moving back to needs review to address #4.

mherchel’s picture

Have we identified where the problem is so that we could report it upstream?

I spent a good 15 minutes looking into it, but with all of our stable blocking issues, I really don't have the bandwidth to put much more in. Is this a requirement to fix this?

If I were to guess, it's going to be a situation where several plugins don't interact quite right together.

lauriii’s picture

I guess we could also file a follow-up for finding the root cause and reporting it upstream.

mherchel’s picture

mherchel’s picture

Status: Needs review » Reviewed & tested by the community

Setting back to RTBC per #3

  • lauriii committed 51a82db on 9.3.x
    Issue #3211889 by mherchel, Gauravmahlawat: Autoprefixer and PostCSS...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Committed 51a82db and pushed to 9.3.x. Cherry-picked to 9.2.x because Olivero is experimental. Thanks!

  • lauriii committed 81c0d2c on 9.2.x
    Issue #3211889 by mherchel, Gauravmahlawat: Autoprefixer and PostCSS...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.