Asked  6 Months ago    Answers:  5   Viewed   44 times

I'm using following HTML markup for my grid.

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

The SCSS code is something like below:

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

Since I'm using auto-prefixer in my workflow it automatically adds all relevant properties with -ms prefix. I can confirm it via inspect element.

Now, the issue is this code works just fine in Chrome, Firefox and Opera, but when I open this page in Microsoft Edge or in IE 11 all grid items are overlapping each other at first cell. According to this site these browsers support CSS Grid layout with -ms prefix. I've created a CodePen for this scenario.

CodePen Link

Why is it not working?

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: (270px)[4];
  grid-template-rows: repeat(4, 270px);
  grid-gap: 30px;
}

.grid .grid-item {
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 270px;
}

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
  grid-row: span 2;
}

.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
  grid-column: span 2;
}
<section class="grid">
  <article class="grid-item width-2x height-2x">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item width-2x">....</article>
  <article class="grid-item height-2x">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item width-2x height-2x">....</article>
</section>

 Answers

23

IE11 uses an older version of the Grid specification.

The properties you are using don't exist in the older grid spec. Using prefixes makes no difference.

Here are three problems I see right off the bat.


repeat()

The repeat() function doesn't exist in the older spec, so it isn't supported by IE11.

You need to use the correct syntax, which is covered in another answer to this post, or declare all row and column lengths.

Instead of:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat( 4, 1fr );
      grid-template-columns: repeat( 4, 1fr );
  -ms-grid-rows: repeat( 4, 270px );
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Use:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
      grid-template-columns:  repeat( 4, 1fr );
  -ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Older spec reference: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows


span

The span keyword doesn't exist in the older spec, so it isn't supported by IE11. You'll have to use the equivalent properties for these browsers.

Instead of:

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
      grid-column: span 2;
}

Use:

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;          /* adjusted */
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;       /* adjusted */
      grid-column: span 2;
}

Older spec reference: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span


grid-gap

The grid-gap property, as well as its long-hand forms grid-column-gap and grid-row-gap, don't exist in the older spec, so they aren't supported by IE11. You'll have to find another way to separate the boxes. I haven't read the entire older spec, so there may be a method. Otherwise, try margins.


grid item auto placement

There was some discussion in the old spec about grid item auto placement, but the feature was never implemented in IE11. (Auto placement of grid items is now standard in current browsers).

So unless you specifically define the placement of grid items, they will stack in cell 1,1.

Use the -ms-grid-row and -ms-grid-column properties.

  • CSS Grid auto placement in IE/EDGE
  • CSS Grid not working in ie11 despite prefixes
  • https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items
Tuesday, June 1, 2021
 
muaaz
answered 6 Months ago
58

I was struggling getting input[type=button] selectors working in IE7 or IE8. The problem turned out to be that the HTML Pages were missing a "!DOCTYPE" declaration. Once I added

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Then everything worked fine. You can obviously use a different "!DOCTYPE" declaration to suit your requirements.

Wednesday, July 21, 2021
 
Sanguine
answered 5 Months ago
66

There are two things that are preventing the animation from working in IE11 and they are as follows:

  • IE11 always has a problem when setting animation-play-state as running in the shorthand. There is no justification for this and it should probably be considered as a bug. Fix for this issue should be to just remove the running from the shorthand. This will cause no harm because the default value for animation-play-state is running.
  • The parent button container's dimension is only 10px x 10px whereas the pseudo-elements are eventually getting a dimension of 60px x 60px during the animation. While other browsers are by defaulting showing the overflow, IE11 seems to be cropping it. This needs to be cross-checked with the specs to find out if it is a bug or something that is loosely defined.
  • The fix for the overflow issue is again pretty simple. Just add a overflow: visible for the button container (.btnPulse.inactive). This will also not cause any problem in other browser because they are anyway doing this by default.

Snippet showing the overflow problem:

In the below snippet, I have avoided the animations and just added a couple of default box-shadow to the pseudo-elements such that the whole thing looks like 4 concentric circles with a red colored circle (produced by the button element) in the middle, followed by a white circle (blank space), followed by a blue colored circle (produced by box shadow of :before element) and then a green circle (produced by box shadow of :after element).

In Chrome, Firefox and Opera the concentric circles would be visible completely but IE11 will show only the center red circle because the rest is outside parent's area.

.btnPulse.inactive.throb::before {
  box-shadow: 0 0 0 16px blue inset;
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 60px;
}
.btnPulse.inactive::before {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive.throb::after {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 8px green inset;
  content: "";
  display: block;
  height: 60px;
  left: -22px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 60px;
}
.btnPulse.inactive {
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
}
.btnPulse {
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#button-container {
  position: absolute;
  left: 100px;
  top: 100px;
}
<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>

Working Snippet with the fix:

The below snippet has both the above mentioned fixes applied and it works in IE11, Chrome, Firefox and Opera.

@keyframes pulse-short {
  100% {
    box-shadow: inset 0 0 0 80px red;
    -moz-box-shadow: inset 0 0 0 80px red;
    -webkit-box-shadow: inset 0 0 0 80px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  }
}
@keyframes pulse-long {
  100% {
    box-shadow: inset 0 0 0 10px red;
    -moz-box-shadow: inset 0 0 0 10px red;
    -webkit-box-shadow: inset 0 0 0 10px red;
    height: 60px;
    width: 60px;
    left: -22px;
    opacity: 0;
  }
}
.btnPulse.inactive.throb::before {
  animation: 1000ms ease 0s normal none infinite pulse-long;
  box-shadow: 0 0 0 0 red inset;
  display: block;
  height: 100%;
  left: 3px;
  margin: 0 auto;
  right: 0;
  top: 50%;
  transform: translate3d(-3px, -50%, 0px);
  width: 100%;
}
.btnPulse.inactive::before {
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 1px red inset;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -5px;
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive.throb::after {
  animation: 2500ms ease 300ms normal none infinite pulse-short;
  border-radius: 100%;
  bottom: -5px;
  box-shadow: 0 0 0 0 red inset;
  content: "";
  display: block;
  height: 30px;
  left: -9px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translate3d(-2px, -50%, 0px);
  transition: all 300ms ease-in-out 0s;
  width: 30px;
}
.btnPulse.inactive {
  background: red none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  height: 10px;
  outline: medium none;
  padding: 0;
  position: relative;
  width: 10px;
  overflow: visible;
}
.btnPulse {
  border-radius: 50%;
  cursor: pointer;
  height: 15px;
  padding: 0;
  transition: all 300ms ease-in-out 0s;
  width: 15px;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#button-container {
  position: absolute;
  left: 100px;
  top: 100px;
}
<div id="button-container">
  <button class="btn btnPulse inactive throb"></button>
</div>
Monday, August 2, 2021
 
SJain
answered 4 Months ago
69

That appears to be yet another IE bug.. As a work-around, you could instead add the opacity via the background property with a rgba() color. Then simply add the opacity to the td element.

Updated Example - results seem consistent across browsers.

.faded {
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;
}
td {
    opacity:0.4
}
Wednesday, August 4, 2021
 
DaveRandom
answered 4 Months ago
62

You didn't mention how you're bundling your JavaScript, but yes, it's possible. For example, PostCSS has a plugin, which polyfills this feature.

The usage depends on how you're bundling your script files. With Webpack, for example, you'd define this plugin in your postcss config or import it as a plugin under your webpack config:

// webpack.config.js:
module.exports = {
  module: {
    rules: [
        {
            test: /.css$/,
            use: ["style-loader", "css-loader", "postcss-loader"]
        }
    ]
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-custom-properties'),
    require('autoprefixer'),
    // any other PostCSS plugins
  ]
}

The plugin also has an example for programmatic usage (as a separate node script):

// dependencies
var fs = require('fs')
var postcss = require('postcss')
var customProperties = require('postcss-custom-properties')

// css to be processed
var css = fs.readFileSync('input.css', 'utf8')

// process css using postcss-custom-properties
var output = postcss()
  .use(customProperties())
  .process(css)
  .css
Wednesday, October 6, 2021
 
newbStudent
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share