How to Make Flex Box Work in Safari

Flexbox code working on all browsers except Safari. Why?

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:

• Flexbox Tag Info

Why is my Flexbox layout not working properly in Safari 15 and in Chrome?

Couple of problems:

1. if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
2. if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
3. if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them

As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.

Code:

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)

How can I make Flexbox work properly in safari 10

try to change max-width to the width

.blocks-links .block-link, .blocks-links .block-link-big {
    color: #6F6F6F;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 21rem;
    /*max-width: 21rem;*/
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
    margin-bottom: 3rem;
    margin-right: 5rem;
}

Flex property not working in Safari browser

Try this style display:-webkit-flex

similarly for all the browser use below css

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

Your code

.rq-search-container {

 position: relative;
 width: 100%;
 background: #fff; 
 display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -ms-flexbox;  /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
 display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
 flex-direction: row; 
 align-items: flex-start;
 border-radius: 2px; 
 /*box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.3); margin-top: 45px;*/ 
 z-index: 30;

}

How can I get Flexbox positioning to work in Safari 10.0?

The problem is you're absolutely positioning flex items.

In a flex container, position: absolute removes items from the flex formatting context.

Just use flex properties to align your items. You don't need position: absolute.

https://www.w3.org/TR/css-flexbox-1/#abspos-items

---

Related Topics