Display: Flex; Doesn't Work on iPad (Both Chrome and Safari)

display: flex; doesn't work on iPad (both Chrome and Safari)

If your iPad isn't running iOS 9, you need to add -webkit-flex: 0 0 155px; to #topleft, -webkit-flex: 0 0 40%; to #topmid, and -webkit-flex: 1; to #topright.

Making an assumption based on your inclusion of display: -webkit-flex;

So, your new CSS might look like:

* { margin: 0; padding: 0; }
#header { height: 60px; display: -webkit-flex; display: flex; }
#topleft { -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; }
#topmid { -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; }
#topright { -webkit-flex: 1; flex: 1; background-color: yellow; }

Also, Chrome on iPad is still using the Safari engine... it's just a webview, so we don't get all the up to date Chrome goodness we get on android devices.

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

Flexbox align-items and justify-content end not working in Safari MacOs

I have used this and it is working

-webkit-justify-content: flex-end;
align-items: flex-end;
-webkit-align-items: flex-end;

Source: How is possible that "display: flex" and "align-items: center" do not work anymore on my iphone?

Flexbox-based CSS not functioning on any iOS browser

Turning off flex on the .issueContainer seemed to fix things for me.

.issueContainer {
    /* display: -webkit-flex; */
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
}

.issueContainer doesn't need flexbox to make it's children stack since that's the default behavior anyway.

flex-wrap not working as expected in Safari

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

This question has some info: https://stackoverflow.com/a/30792851/756329

flexbox not working (ordering) on iOS

It's not working because you're missing the -webkit prefix on order, which is still required in all versions of Safari & iOS Safari that support flexbox. In regard to prefixes for other browsers, take a look a the support chart for flexbox on caniuse.

Update your code to:

li:nth-child(1) {order: 1; -webkit-order: 1;}
li:nth-child(2) {order: 2; -webkit-order: 2;}
li:nth-child(3) {order: 4; -webkit-order: 4;}
li:nth-child(4) {order: 3; -webkit-order: 3;}
li:nth-child(5) {order: 5; -webkit-order: 5;}
li:nth-child(6) {order: 6; -webkit-order: 6;}
li:nth-child(7) {order: 7; -webkit-order: 7;}

Justify-content value of space-between not working for iOS Chrome and Safari browsers

For Webkit-Browsers below iOS 9.0 you need to use vendor prefixes:

display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;

Your snippet:

#app_page { width: 100% }
#app_page .button_box {     width: 100%;     box-sizing: border-box;     display: -webkit-flex;    display: flex;    -webkit-justify-content: space-between;    justify-content: space-between;}
#app_page .button_box .download {     vertical-align: top;     background: black;     width: 36px;     height: 36px;     line-height: 36px;     display: inline-block;     color: #fff; }
#app_page .button_box .share_icon {     cursor: pointer;     display: inline-block;     background:black;     height: 36px;     width: 36px;}

<div id='app_page'>    <div class='button_box'>        <div class='share_icon'></div>     <div class='share_icon'></div>     <div class='share_icon'></div>  <a href='/' class='download' target='_blank'>GET</a> </div></div>

---

Related Topics