The site requires a browser support section

[Jack Rimell]

When it comes to choosing a framework, most people will want to know what browsers it supports, especially when the framework is based on flexbox. When trying to find out the browsers support I went through the homepage, documentation and blog before trying the github repo on which it is.

A nice clear section on the homepage would help users make their choice about choosing if they want this framework or not.

[Troy Alford]

Agreed. At my current employer, there is a bone of contention around "flexbox being buggy on IE." For ease of adoption, it might be nice to add something describing a bit more about what is / is not supported - so that a potential implementer doesn't need to go do that research themself by digging through other sites.

@silverlight513 - could you perhaps share a bit of your findings, as a suggested starting-point for the maintainer to refer to?

[Jack Rimell]

The Bulma repo has a section in it's readme with the following findings on the browser support of the framework. It claims to have done the research by use of looking up the usage on http://caniuse.com.

Chrome 45+
Edge 13+
Firefox 43+
Internet Explorer 10+
Safari 9+

I'm not sure how accurate those assumptions are considering http://caniuse.com/#search=flexbox says that IE only has partial support throughout due to many known bugs. Chrome support also goes back all the way to version 21 and Firefox goes back to 28.

I think that Bulma itself should be tested thoroughly in the browsers themselves so that an accurate representation can be given of the support and intended behaviour of the framework is correct. I would test myself but I don't have the time right now. I may get around to it if no one picks it up in the next couple weeks.

[Troy Alford]

The current listing states:

1. In IE 10, setting -ms-flex-flow: row wrap will not wrap unless display: inline-block is set on child elements.
2. IE 11 incorrectly focuses a child element if the parent uses display: flex and has a tabindex set see testcase.
3. IE11 does not wrap long paragraphs of text
4. IE11 will not apply flexbox on pseudo-elements. See bug.
5. Flexbugs: community-curated list of flexbox issues and cross-browser workarounds for them
6. Firefox does not support Flexbox in button elements
7. In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights. Chrome bug
8. In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
9. In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
10. IE 11 does not vertically align items correctly when min-height is used see bug

Most of the IE specific items seem like they would be little issue, for the most part.

1. We should be able to solve this the CSS framework. Essentially anywhere -ms-flex-flow: row wrap; is used, we could also apply > * { display: inline-block; } to ensure direct children are set in this way.
2. This probably only affects forms or toolbars.
3. That sucks. :(
4. Also sucks - but probably doesn't affect this framework, from what I've seen.
5. There's a bunch of stuff here, too big for me to review at the moment.
6. Probably doesn't matter to us
7. This is an inconsistency that is unfortunate, but only seems to matter if you're stretching vertically with flex - not horizontally. So far as I understand, that won't affect most of the components here.
8. We should be able to fix this with defaults.
9. Again, unfortunate - but like 7, only affects vertical stretching. A person implementing can also overcome by simply setting a height.
10. Ditto to 7 and 9.

[Jens Hausdorf]

I think this repo is not maintenanced anymore... 👎