Add autoprefixer support for ie10

Question

Add autoprefixer support for ie10

Closed this issue 7 years ago · 11 comments

we are targeting IE10&11 in our current project. I assume your autoprefixer fork supports flexbox only for IE 11 upwards.

To be more specific: the current flex standard uses justify-content: space-between but the old draft implemented in IE10 uses -ms-flex-pack: justify.

Current result in IE10 / Desired result in IE11:

-ms-flex-pack: space-between;

Desired result in IE10:

-ms-flex-pack: justify;

Any chances to get this in or to workaround this issue?

See this issue for more information:
postcss/autoprefixer#165 (comment)

Thanks 👍

Answer 1 · 2016-10-24T13:33:22.000Z

this should be fixable, give me a day or so. I'll try to think of a workaround too.

Answer 2 · 2016-11-15T14:30:38.000Z

given

{ justifyContent: 'space-between' }

is this the expected css?

.css-1178gq1,[data-css-1178gq1] {
  justify-content:space-between;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  -webkit-box-pack:justify;
}

Answer 3 · 2016-11-15T15:38:04.000Z

I think this is correct for IE10 but IE11 will pick up -ms-flex-pack too and needs another value (space-between) instead. This seems to be a IE10/IE11 bug.

Answer 4 · 2016-11-15T15:50:57.000Z

From the looks of it, ie11 doesn't require prefixes?

Answer 5 · 2016-11-15T15:55:30.000Z

Yes this is correct, but if there is -ms-flex-pack (maybe as the last entry) IE11 will pick up this instead. That's our observation. Will verify it this evening. :)

Answer 6 · 2016-11-15T17:37:41.000Z

Okay it is the other way around. Something went wrong in IE10

Glamor style is

style({
  display: 'flex',
  justifyContent: 'space-between',
  width: '100%',
  height: '46px',
  padding: '0.625em',
  boxSizing: 'border-box',
  backgroundColor: 'rgba(255,255,255, 0.97)',
  boxShadow: '0px 0px 20px 0px transparent',
  transition: 'box-shadow .5s ease-in-out'
})

Result in IE10 (doesnt work)

Result in IE11 (works)

I think justify-content: 'space-between' should be translated to -ms-flex-pack: 'justify' for IE10 (see mentioned autoprefixer issue).

Answer 7 · 2016-11-30T02:30:51.000Z

could you have a try with 2.20.3 and let me know?

Answer 8 · 2016-11-30T02:45:27.000Z

oh wait I think I understand you now. IE11 will pick up ms flex pack along with justify-content. hmm.

Answer 9 · 2016-11-30T11:44:38.000Z

This is turning out to be rather messy. The problem here is that I need to maintain the ability to generate all the css on the server side, which means this might still break when server rendered. I'm open to ideas. What do other folks in production do for this scenario? some media query hack to wrap the value?

Answer 10 · 2016-11-30T12:21:32.000Z

I've had to revert again to the previous behavior because it was causing problems. My best idea right now is to hand code exceptions per browser inside css hacks. I'll think about this and get back to this issue.

Answer 11 · 2017-07-19T10:35:40.000Z

recommended workaround is to whack out the plugins, and add your own prefixer with required behavior. likely that this issue won't be fixed in glamor itself for now.