CODEWITHSUNDEEP
htmlcsssafariflexbox
Uland Nimblehoof
Uland Nimblehoof

Reputation: 1022

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

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!

Upvotes: 4

Views: 4071

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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

Upvotes: 3

Related Questions