Add support for IE11 and prefixed settings about gridly HOT 18 CLOSED

Holy Microsoft Gods 😆 😆 😆

from gridly.

I did read your 'guidelines' for contributing, but seemed like overkill for a project which literally has two lines of (compressed) CSS.

😁 That file is generated. Here I described the process how I create packages.

from gridly.

Isn't autoprefixer supposed to add the -ms prefixes too? 💭 /cc @phoenixenero #13

The prefixed directory contains the prefixed CSS.

Thanks a lot for heads-up!

from gridly.

@IonicaBizau it can be because IE11 don't have more than 5% usage? (that's in postcssjson).

from gridly.

Good point. Hmm, maybe should we remove that option? 💥

from gridly.

Mm nope. If i remember correctly, by defaults it uses 1%. So i think it will work if increase it.

from gridly.

Looking at browser usage IE11 hovers above 5% to 17%
https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
https://www.w3counter.com/globalstats.php

I also apologize i didn't even notice the prefixed folder, i just bookmarked the main one and haven't looked back.

Also for the flex:1 bug, this lists a good bit of the flexbox bugs: https://github.com/philipwalton/flexbugs

Excerpt:

Prior to the release of IE 10, the flexbox spec at the time stated that a flexbox item's preferred size required a unit when using the flex shorthand:

If the 'preferred-size' is ‘0’, it must be specified with a unit (like ‘0px’) to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.

This is no longer true in the spec, but IE 10-11 still treat it as true. If you use the declaration flex: 1 0 0 in one of these browsers, it will be an error and the entire rule (including all the flexibility properties) will be ignored.
Workaround

When using the flex shorthand, always include a unit in the flex-basis portion. For example: 1 0 0%.

Important: using a flex value of something like 1 0 0px can still be a problem because many CSS minifiers will convert 0px to 0. To avoid this, make sure to use 0% instead of 0px since most minifiers won't touch percentage values for other reasons.

from gridly.

@gmariani I'm using Gridly in a new project that should (probably) be compatible with IE. On IE11 I don't see any issues. Can you create a demo and show how it's failing?

Thanks!

from gridly.

Seems to work fine on IE11.

from gridly.

I"m very sorry for not responding sooner. I saw you just now closed the ticket but here is an example of the IE11 bug.

http://muncyboro.org/

On this page, in IE11, inspect the DIV containing the the header "About Muncy Borough". The containing DIV has the 'col' class assigned to it. I currently have modified the .col class from
flex:1
to
flex-grow:1

In in the inspector change it back to flex:1 and you'll see the columns no longer align properly and overflow into the right sidebar. Setting flex:1 sets other properties where the defaults aren't the same as other browsers. So you have to be explicit and say that you only want to set flex-grow to be set.

from gridly.

Here is what the error originally looked like for the client when I first put this ticket in. This was using the original gridly (unprefixed), although the prefixed doesn't have the -ms- prefix so it's not much different. The screenshots they differ because one was with compatibility mode and the other was without.

from gridly.

Here was the original CSS on the broken site.
/* Gridly */
.row{display:flex}
.col{flex:1}

Here is what I changed it to

/* Gridly */
.row{display: -ms-flexbox;display: -webkit-flex;display:flex;}
/*.col{-ms-flex: 1 1 0%;-webkit-flex: 1 1 0%;flex: 1 1 0%}*/
.col{-ms-flex-grow:1;-webkit-flex-grow:1;flex-grow:1}

from gridly.

So, is it just replacing flex with flex-grow? I guess autoprefixer will prefix these.

from gridly.

I'm going to lean towards yes. I was still trying to verify the exact cause so I don't steer you astray. I looked up the original page HTML versus what's live today. I've recreated a simple demo of what the original problem looked like. This works in Chrome and Firefox but fails in IE11.

Looking at this old code I do see I put flex:0 on a few columns to help control the resizing but that compounded the problem in IE. In the end removing those and switching to flex-grow did resolve my issues.
test.txt

from gridly.

@gmariani Can you please create a pull request, then? That would help!

from gridly.

I don't use Github, so forgive me in not knowing anything about how github works. I'll create a pull request, but i'll be honest. That is literally what I'm going to do, i'm sorry.

from gridly.

Ok so I see it wants me to merge some branches. I assume you don't want me to do a pull request to merge your two branches... Or are you assuming I made a branch, made changes and then try to merge? I dunno, again sorry.

from gridly.

If I am not wrong we fixed this already...

from gridly.