Weird CSS width и height на iOS

Question

У меня возникла проблема с свойством width и height на iOS, а на Chrome на ПК он работает нормально.

Работа штрафа на Chrome:

на IOS, тот же код:

SCSS Код:

.zoom-controls { 
    position: absolute; 
    top: 20px; 
    right: 15px; 
    height: 100%; 
    @include box-sizing(border-box); 
    @include flexbox(column, center); 

    button { 
    @include flex(0); 
    -webkit-appearance: none; 
    font-family: Arial, sans-serif; 
    border: none; 
    height: 40px; 
    width: 40px; 
    line-height: 0px; 
    background-color: rgba(#000, 0.5); 
    color: #FFF; 
    margin-bottom: 20px; 
    font-size: 36px; 
    outline: 0; 
    border-radius: 50%; 
    text-align: center; 
    @include box-sizing(border-box); 

    .up { 
     line-height: 10px; 
    } 
    } 
} 

flexbox и flex Каст О.М. Примеси:

@mixin flex($grow, $shrink: 1, $basis: auto) 
{ 
    -webkit-box-flex: $grow; 
    -moz-box-flex: $grow; 
    -webkit-flex: $grow $shrink $basis; 
    -ms-flex: $grow $shrink $basis; 
    box-flex: $grow $shrink $basis; 
    flex: $grow $shrink $basis; 
} 


@mixin flexbox($direction, $justify, $wrap: nowrap) 
{ 
    @include display-flex(); 
    @include flex-flow($direction, $wrap); 
    @include justify-content($justify); 
} 

И, наконец, HTML из этих элементов управления:

<div class="zoom-controls"> 
    <button class="up" hm-tap="add()">+</button> 
    <button class="down" hm-tap="subtract()">-</button> 
</div> 

Это определенно похоже, что есть некоторые проблемы ширины, хотя я не получил идею, что может привести к это.

Answer 1

вам нужно изменить этот

@mixin flex($grow, $shrink: 1, $basis: auto) 
{ 
    -webkit-box-flex: $grow; 
    -moz-box-flex: $grow; 
    -webkit-flex: $grow $shrink $basis; 
    -ms-flex: $grow $shrink $basis; 
    box-flex: $grow $shrink $basis; 
    flex: $grow $shrink $basis; 
} 

в этом

@mixin flex($grow, $shrink, $basis: auto) 
{ 
    -webkit-box-flex: $grow; 
    -moz-box-flex: $grow; 
    -webkit-flex: $grow $shrink $basis; 
    -ms-flex: $grow $shrink $basis; 
    box-flex: $grow $shrink $basis; 
    flex: $grow $shrink $basis; 
} 

я думаю, что это является причиной проблемы

$shrink: 1