question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS Grid not receiving IE 11 vendor prefixes

See original GitHub issue

Bug report

Describe the bug

Styling a CSS grid using built-in CSS support does not compile to CSS with prefixes for IE 11.

To Reproduce

I created a Next.js project using npm init next-app, then added two pages demonstrating basic CSS grids:

Expected behavior

CSS containing Grid Layouts should be automatically compiled for Internet Explorer 11 compatibility. (https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior)

Screenshots

Global CSS demo in IE 11 Global CSS demo in IE 11

Global CSS demo in Edge Global CSS demo in Edge

System information

  • OS: Windows
  • Browser: IE 11
  • Version of Next.js: 9.2.1

Additional context

Attempts to configure a specific browserslist key have not produced the expected output either:

"browserslist": [">0.3%", "ie 11", "not op_mini all"]

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
Timercommented, Feb 13, 2020

Sorry, but we have no suggestions here. As their docs explain it’s really hard to compile CSS Grid for IE 11.

https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie

You can open an issue with them to ask for pointers.

1reaction
Timercommented, Feb 12, 2020

We should document this limitation.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Grid Layout not working in IE11 even with prefixes
Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge...
Read more >
CSS Grid in IE: CSS Grid and the New Autoprefixer
Autoprefixer cannot prefix negative integers. Each grid element must have unique area names. Autoprefixer only prefixes grid-gap if both grid- ...
Read more >
CSS Grid Layout and progressive enhancement
Other than in Internet Explorer, CSS Grid Layout is unprefixed in ... vendor prefixed, they will not effect any browser supporting the up...
Read more >
IE 11 Not Supporting Grid Layout - HTML & CSS - SitePoint
But whilst in Chrome no problem IE 11 no go :frowning: Bit ... much any CSS selector/property, and requirements (such as vendor prefixes)....
Read more >
Supporting CSS Grid in Internet Explorer | by Elad Shechter
Autoprefixer online - add the desired vendor prefixes and remove unnecessary in your CSS ... We got CSS that is 100% IE CSS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found