Flexbox code working on all browsers except Safari. Why?

by

Flexbox is a CSS3 technology. This means it’s relatively new and some browsers don’t provide full support for flex properties.

Here’s a run-down:

  • IE 8 and 9 do not support flexbox. If you’re wanting to use flex properties in these browsers, don’t bother wasting your time. A flexbox polyfill made the rounds for a while, but it didn’t work well and is no longer maintained.

  • IE 10 supports a previous version of flexbox and requires vendor prefixes. Be aware that certain properties from the current spec aren’t supported in IE10 (such as flex-grow, flex-shrink and flex-basis). See the Flexbox 2012 Property Index.

  • IE 11 is good, but buggy. It’s based on the current flexbox standard. See the KNOWN ISSUES tab on this page for some of the problems. Also see: flex property not working in IE

  • With Chrome, Firefox and Edge you’re good all around. You’ll find minor bugs and inconsistencies but there are usually easy fixes. You’ll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.

  • Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari

For a complete review of flexbox browser support, see this page:
http://caniuse.com/#search=flex

For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this article for -webkit- prefixes that some prefix generators don’t include.

For a list of common flex bugs and their workarounds see Flexbugs.

Also, on this site, there’s:

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. How do I keep two side-by-side div elements the same height?
  3. How to disable equal height columns in Flexbox?
  4. Center and bottom-align flex items
  5. Fill the remaining height or width in a flex container
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. Flexbox: 4 items per row
  8. Absolutely positioned flex item is not removed from the normal flow in IE11
  9. How to Right-align flex item?
  10. How to remove the space between inline/inline-block elements?
  11. Heights rendering differently in Chrome and Firefox [duplicate]
  12. flex container min-height ignored in IE
  13. Properly sizing and aligning the flex item(s) on the last row
  14. Maintain image aspect ratio when changing height
  15. float does not work in a flex container
  16. Flexbox not giving equal width to elements
  17. Why does percentage padding break my flex item?
  18. All widths set to width of widest element
  19. Why does flexbox stretch my image rather than retaining aspect ratio?
  20. How to center-align one flex item and right-align another using Flexbox [duplicate]
  21. How to make a sticky footer using flexbox in IE11?
  22. Why is there vertical scroll on the main container?
  23. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  24. How can I create a row-based masonry layout using CSS?
  25. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  26. How do I make flex box work in safari?
  27. Zebra striping a flexbox table with wrapping items
  28. Element with “display: inline-flex” has a strange top margin
  29. Aligning to the bottom in flexbox
  30. Sizing flex items on the last row

Leave a Comment