5 ms·

Flexbox in 5 minutes* * (Not including 6 hours of painstaking hacks to make it work with Safari and IE10) ;) I love Flexbox and use it for all my projects now

by namuol 11y ago

Flexbox in 5 minutes* * (Not including 6 hours of painstaking hacks to make it work with Safari and IE10) ;) I love Flexbox and use it for all my projects now, but yeah: it's important to keep in mind that a lot of browsers out there have a buggy/incomplete implementation of it. This is a great resource if you're just starting to use flexbox in a real-world webapp and want to catch issues early: https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs

veidr 11y ago
Yep! As mainly an Objective-C programmer (and not much of a web developer) I was very excited about flexbox when I had to work on a native OS X app that edits grids of photos in the app but also exports to web. Legacy browsers were not a requirement (yay!) so I was all over flexbox, and indeed it took about 5 minutes to get it working perfectly in Firefox and Chrome. Sadly, after another 20+ hours of trying to get it working in Safari we had to declare it a failed effort, and give up on flexbox. It almost worked but Safari had layout bugs that would render things in the wrong place, or inappropriately partially outside the visible bounds of the window. (This was -- checks git -- April 2015. I still click every link about flexbox on HN waiting to see somebody say it Safari support for it has improved.)
- dmix 11y ago
  Are there no polyfills/css libraries to take care of Safari?
  - namuol 11y ago
    I find it's better to be aware of/vigilant about the common bugs in flexbox's implementation, and explicitly fix specific problems as you encounter them. I've never found a polyfill that doesn't rely on hacks that lead to even-harder-to-fix problems. It would be great for there to be a sort of CSS linter that could help here, but I haven't found one yet.
- tempodox 11y ago
  Nope, Safari 8.0.8 still has `flexbox` rendering bugs as per the posted demo link.
- andrewgleave 11y ago
  Safari 9.0 and WebKit builds seem to show conformance in my limited testing.
  - veidr 11y ago
    HEY! Just came back here to say you are right. Installed the developer beta of OS X 10.11 today (which includes Safari 9) and tried to open some of the output files from the old project mentioned above. They all work in OS X Safari now. None of them really stress-test flexbox or do anything advanced; they are just grids that are supposed to resize well. But, the bugs we hit doing this basic stuff in OS X 10.10 / Safari 8 seem to be fixed.
thoman23 11y ago
Agreed. I love Flexbox too, but you can't ignore the fact that this very same flexboxin5 tutorial site is completely broken in Safari and has been for months.
- deleted 11y ago
  [deleted]
- talmand 11y ago
  The site is not broken in Safari, it's Safari's implementation of Flex that is broken. Let's be sure to lay the blame where it belongs.
deleted 11y ago
[deleted]
deleted 11y ago
[deleted]
dahart 11y ago
I think I only use a fraction of flexbox's capability, but I don't seem to have any more trouble in Safari, even iOS, than any other browser... are there some known issues in Safari? Beyond what is listed here in the known issues section? http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox Pretty sure I've hit every single one of those. I do use autoprefixer, maybe that helps. But in general, flexbox is the only layout model that makes any sense to me for building web apps, and support seems decent to me and only improving from here out. Curious if my outlook seems more positive than what I'm reading here because I'm getting lucky and missing some of the ugly flexbox bugs others are running into?
- uxwtf 11y ago
  As a designer I love the equal positioning that flexbox offers. I tried to use it for some projects, but it needs some more work on browsers compatibility. Here's how the site looks for me in Safari 8.0.8: http://imgur.com/aYwYTDx http://imgur.com/aYwYTDx Safari seems to refuse reading flex style: http://imgur.com/LEhtYBZ http://imgur.com/LEhtYBZ
  - nmjenkins 11y ago
    That's because flexbox is still prefixed in Safari 8 (see http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox). Just add -webkit- versions of all of the properties as well and it will probably work. e.g. "display: -webkit-flex".
    - thirdsun 11y ago
      Yes, pretty disappointing that a tutorial on flexbox fails to prefix its styling rules - which in this case is very much essential to make your point. Since I use autoprefixer in all my projects and only need to cover moderately modern and relevant browsers, flexbox has been a regular companion for me - without any problems. So many layout headaches that can be avoided with this great addition to CSS.

by namuol 11y ago

veidr 11y ago

Yep! As mainly an Objective-C programmer (and not much of a web developer) I was very excited about flexbox when I had to work on a native OS X app that edits grids of photos in the app but also exports to web. Legacy browsers were not a requirement (yay!) so I was all over flexbox, and indeed it took about 5 minutes to get it working perfectly in Firefox and Chrome. Sadly, after another 20+ hours of trying to get it working in Safari we had to declare it a failed effort, and give up on flexbox. It almost worked but Safari had layout bugs that would render things in the wrong place, or inappropriately partially outside the visible bounds of the window. (This was -- checks git -- April 2015. I still click every link about flexbox on HN waiting to see somebody say it Safari support for it has improved.)

dmix 11y ago
Are there no polyfills/css libraries to take care of Safari?
- namuol 11y ago
  I find it's better to be aware of/vigilant about the common bugs in flexbox's implementation, and explicitly fix specific problems as you encounter them. I've never found a polyfill that doesn't rely on hacks that lead to even-harder-to-fix problems. It would be great for there to be a sort of CSS linter that could help here, but I haven't found one yet.
tempodox 11y ago
Nope, Safari 8.0.8 still has `flexbox` rendering bugs as per the posted demo link.
andrewgleave 11y ago
Safari 9.0 and WebKit builds seem to show conformance in my limited testing.
- veidr 11y ago
  HEY! Just came back here to say you are right. Installed the developer beta of OS X 10.11 today (which includes Safari 9) and tried to open some of the output files from the old project mentioned above. They all work in OS X Safari now. None of them really stress-test flexbox or do anything advanced; they are just grids that are supposed to resize well. But, the bugs we hit doing this basic stuff in OS X 10.10 / Safari 8 seem to be fixed.

thoman23 11y ago

Agreed. I love Flexbox too, but you can't ignore the fact that this very same flexboxin5 tutorial site is completely broken in Safari and has been for months.

deleted 11y ago
[deleted]
talmand 11y ago
The site is not broken in Safari, it's Safari's implementation of Flex that is broken. Let's be sure to lay the blame where it belongs.

deleted 11y ago

[deleted]

deleted 11y ago

[deleted]

dahart 11y ago

I think I only use a fraction of flexbox's capability, but I don't seem to have any more trouble in Safari, even iOS, than any other browser... are there some known issues in Safari? Beyond what is listed here in the known issues section? http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox Pretty sure I've hit every single one of those. I do use autoprefixer, maybe that helps. But in general, flexbox is the only layout model that makes any sense to me for building web apps, and support seems decent to me and only improving from here out. Curious if my outlook seems more positive than what I'm reading here because I'm getting lucky and missing some of the ugly flexbox bugs others are running into?

uxwtf 11y ago
As a designer I love the equal positioning that flexbox offers. I tried to use it for some projects, but it needs some more work on browsers compatibility. Here's how the site looks for me in Safari 8.0.8: http://imgur.com/aYwYTDx http://imgur.com/aYwYTDx Safari seems to refuse reading flex style: http://imgur.com/LEhtYBZ http://imgur.com/LEhtYBZ
- nmjenkins 11y ago
  That's because flexbox is still prefixed in Safari 8 (see http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox). Just add -webkit- versions of all of the properties as well and it will probably work. e.g. "display: -webkit-flex".
  - thirdsun 11y ago
    Yes, pretty disappointing that a tutorial on flexbox fails to prefix its styling rules - which in this case is very much essential to make your point. Since I use autoprefixer in all my projects and only need to cover moderately modern and relevant browsers, flexbox has been a regular companion for me - without any problems. So many layout headaches that can be avoided with this great addition to CSS.