CSS failed on Safari - html

Question

I have the following HTML:
<div class="my-select-color-items">
<div ng-repeat="color in colors | orderBy:descricao" class="my-select-color-item" ng-click="select(color)" ng-style="bgColor(color)">
<h1 class="title">{{color.descricao}}</h1>
</div>
</div>
I have the following CSS:
.my-select-img-items,
.my-select-color-items {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
}
.my-select-img-item:empty,
.my-select-color-item:empty {
border: none;
height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.my-select-img-item,
.my-select-color-item {
position: relative;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
.my-select-img-item {
height: 200px;
width: 200px;
}
.my-select-color-item {
height: 80px;
width: 80px;
}
.my-select-color-item .title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 12px;
}
It works fine, like this:
http://postimg.org/image/gvkavjnsx/
The problem happens using Safari. See below:
http://postimg.org/image/tb3lrxpe3/
Does anyone knows how can I solve this problem?
Best regards
Wilton