Flexbox child align-self: flex-end issue in Safari - html

Question

I'm having some trouble with a flexbox layout in Safari. I have a barchart, aligned using flexbox, but I can't implement it correctly in safari.
Please take a look on my JSfiddle. All advice is welcome! All browsers display it correct, except for Safari.
Fiddle: http://jsfiddle.net/husky999/dq0ha3d5/11/
HTML
<div id="barChart">
<ul class="bars">
<li class="axis">
<div class="level">Ninja</div>
<div class="level">Skilled</div>
<div class="level">Average</div>
<div class="level">Noob</div>
</li>
<li id="tomato" class="eachBar">
<div class="percentage">90<small>%</small>
<div class="skill">HTML5</div></div>
</li>
<li id="pink" class="eachBar">
<div class="percentage">70<small>%</small>
<div class="skill">SASS</div>
</div>
</li>
<li id="yellow" class="eachBar">
<div class="percentage">50<small>%</small>
<div class="skill">JS</div>
</div>
</li>
<li id="aqua" class="eachBar">
<div class="percentage">60<small>%</small>
<div class="skill">JQUERY</div>
</div>
</li>
<li id="apple" class="eachBar">
<div class="percentage">40<small>%</small>
<div class="skill">SYMFONY</div>
</div>
</li>
<li id="khaki" class="eachBar">
<div class="percentage">55<small>%</small>
<div class="skill">OOP</div>
</div>
</li>
</ul>
</div>
CSS
#barChart {
height: 450px;
position: relative;
width: 100%;
background: url(http://2cweb.vn/img/editor-upload/blog/Bo-suu-tap-mau-pattern-cho-thiet-ke-web-P1-2Cwebvn-03.jpg) repeat;
border-bottom: 1px solid #ccc;
}
.bars {
list-style: none;
display: inline;
height: 450px;
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:flex;
}
.level {
margin: 0 20px 100px 0;
}
.percentage {
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
bottom: 0;
font-family: arial;
font-size: 32pt;
color: #FFF;
opacity: 0.3;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.skill {
text-align: center;
color: #fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
font-family: arial;
font-size: 12px;
}
small {
font-size: 14pt;
vertical-align: middle;
}
.eachBar {
position: relative;
width: 15%;
float: left;
margin-left:20px;
visibility: hidden;
display: inline-block;
align-self: flex-end;
opacity: 0;
-webkit-border-radius: 0.3em 0.3em 0 0;
-moz-box-shadow: inset 0 0 1px 0 #FFF;
-webkit-box-shadow: inset 0 0 1px 0 #FFF;
box-shadow: inset 0 0 1px 0 #FFF;
}
.axis {
display: block;
float: left;
border-right: 1px solid #CCC;
}
#tomato {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: rgb(255,48,25); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(207,4,4,1);
}
#pink {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,e93cec+100;Pink+3D+%232 */
background: rgb(251,131,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(251,131,250,1) 0%, rgba(233,60,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,131,250,1)), color-stop(100%,rgba(233,60,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(233,60,236,1);
}
#yellow {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1e767+0,feb645+100;Yellow+3D */
background: rgb(241,231,103); /* Old browsers */
background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(254,182,69,1);
}
#aqua {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#93cede+0,75bdd1+41,49a5bf+100;Blue+3D+%235 */
background: rgb(147,206,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,206,222,1)), color-stop(41%,rgba(117,189,209,1)), color-stop(100%,rgba(73,165,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(73,165,191,1);
}
#apple {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d2ff52+0,91e842+100;Neon */
background: rgb(210,255,82); /* Old browsers */
background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,255,82,1)), color-stop(100%,rgba(145,232,66,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(183,223,45,1);
}
#khaki {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5cea6+0,c9c190+40,b7ad70+100;Brown+3D */
background: rgb(213,206,166); /* Old browsers */
background: -moz-linear-gradient(top, rgba(213,206,166,1) 0%, rgba(201,193,144,1) 40%, rgba(183,173,112,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,206,166,1)), color-stop(40%,rgba(201,193,144,1)), color-stop(100%,rgba(183,173,112,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(183,173,112,1);
}
Javascript
$(document).ready(function() {
$('#tomato').css({'visibility':'visible', 'height': '0%'}).animate({'opacity':'1', 'height':'90%'}, 1000, 'easeOutExpo');
$('#pink').css({'visibility':'visible', 'height': '0%'}).stop().delay(200).animate({'opacity':'1', 'height':'70%'}, 1000, 'easeOutExpo');
$('#yellow').css({'visibility':'visible', 'height': '0%'}).stop().delay(400).animate({'opacity':'1', 'height':'50%'}, 1000, 'easeOutExpo');
$('#aqua').css({'visibility':'visible', 'height': '0%'}).stop().delay(600).animate({'opacity':'1', 'height':'60%'}, 1000, 'easeOutExpo');
$('#apple').css({'visibility':'visible', 'height': '0%'}).stop().delay(800).animate({'opacity':'1', 'height':'40%'}, 1000, 'easeOutExpo');
$('#khaki').css({'visibility':'visible', 'height': '0%'}).stop().delay(1000).animate({'opacity':'1', 'height':'55%'}, 1000, 'easeOutExpo');
});
Thanks, and have nice day/night!

Answer 1

Looks like you included Safari prefixes for the flex container...
.bars {
list-style: none;
display: inline;
height: 450px;
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:flex;
}
... but you didn't for the flex items (the bars).
Make this adjustment to your CSS:
.eachBar {
position: relative;
width: 15%;
float: left;
margin-left:20px;
visibility: hidden;
display: inline-block;
-webkit-align-self: flex-end; /* add prefixed version */
-ms-flex-item-align: end; /* add prefixed version */
align-self: flex-end;
opacity: 0;
-webkit-border-radius: 0.3em 0.3em 0 0;
-moz-box-shadow: inset 0 0 1px 0 #FFF;
-webkit-box-shadow: inset 0 0 1px 0 #FFF;
box-shadow: inset 0 0 1px 0 #FFF;
}
Revised Demo
Although Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.
For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
For flexbox browser support details see here: http://caniuse.com/#search=flexbox