title: Flexbox child align-self: flex-end issue in Safari
body: <p>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.</p>
  
  <p>Please take a look on my <a href="http://jsfiddle.net/husky999/dq0ha3d5/11/" rel="nofollow">JSfiddle</a>. All advice is welcome! All browsers display it correct, except for Safari.</p>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/husky999/dq0ha3d5/11/" rel="nofollow">http://jsfiddle.net/husky999/dq0ha3d5/11/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="barChart"&gt;
      &lt;ul class="bars"&gt;
          &lt;li class="axis"&gt;
              &lt;div class="level"&gt;Ninja&lt;/div&gt;
              &lt;div class="level"&gt;Skilled&lt;/div&gt;
              &lt;div class="level"&gt;Average&lt;/div&gt;
              &lt;div class="level"&gt;Noob&lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="tomato" class="eachBar"&gt;
              &lt;div class="percentage"&gt;90&lt;small&gt;%&lt;/small&gt;
              &lt;div class="skill"&gt;HTML5&lt;/div&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="pink" class="eachBar"&gt;
              &lt;div class="percentage"&gt;70&lt;small&gt;%&lt;/small&gt;
              &lt;div class="skill"&gt;SASS&lt;/div&gt;
              &lt;/div&gt;      
          &lt;/li&gt;
          &lt;li id="yellow" class="eachBar"&gt;
              &lt;div class="percentage"&gt;50&lt;small&gt;%&lt;/small&gt;
              &lt;div class="skill"&gt;JS&lt;/div&gt;
              &lt;/div&gt;   
          &lt;/li&gt;
          &lt;li id="aqua" class="eachBar"&gt;
              &lt;div class="percentage"&gt;60&lt;small&gt;%&lt;/small&gt;
              &lt;div class="skill"&gt;JQUERY&lt;/div&gt;
              &lt;/div&gt;  
          &lt;/li&gt;
          &lt;li id="apple" class="eachBar"&gt;
              &lt;div class="percentage"&gt;40&lt;small&gt;%&lt;/small&gt;
              &lt;div class="skill"&gt;SYMFONY&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="khaki" class="eachBar"&gt;
              &lt;div class="percentage"&gt;55&lt;small&gt;%&lt;/small&gt;
              &lt;div class="skill"&gt;OOP&lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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);
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(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');
  });
  </code></pre>
  
  <p>Thanks, and have nice day/night!</p>