Кнопка CSS неправильно отображается на iPad

Question

У меня есть кнопка, созданная с помощью CSS в веб-приложении, когда я тестирую кнопку на хроме на андроиде, кнопка отлично отображает и остается на вершине всего из-за свойства z-index:

Но когда я испытываю то же самое на хром на IOS оно не делает кнопку путь его должен быть и оленьей кожей уважать собственность г-индекс:

Я попытался добавить «-webkit-appearance: none»; в CSS, но оно не работает в CSS Heres и HTML:

#PINPOINT { 
 
    -webkit-appearance: none; 
 
    width: 70px; 
 
    height: 70px; 
 
    margin: 15px auto; 
 
    position: relative; 
 
    z-index: 5000; 
 
} 
 

 
#BUTTON { 
 
    -webkit-appearance: none; 
 
    box-sizing: border-box; 
 
    color: rgba(0, 0, 0, 0.870588); 
 
    height: 70px; 
 
    text-align: left; 
 
    width: 70px; 
 
    column-rule-color: rgba(0, 0, 0, 0.870588); 
 
    perspective-origin: 227.828px 35px; 
 
    transform-origin: 227.828px 35px; 
 
    border: 0px none rgba(0, 0, 0, 0.870588); 
 
    font: normal normal normal normal 14px/21px Roboto, sans-serif; 
 
    outline: rgba(0, 0, 0, 0.870588) none 0px; 
 
    position: fixed; 
 
    right: 0; 
 
} 
 

 
#TEXT { 
 
    -webkit-appearance: none; 
 
    bottom: 0px; 
 
    box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px; 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 55.5px; 
 
    left: 0px; 
 
    letter-spacing: 0.5px; 
 
    position: relative; 
 
    right: 0px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    top: 0px; 
 
    vertical-align: middle; 
 
    width: 55.5px; 
 
    will-change: opacity, transform; 
 
    z-index: 1; 
 
    column-rule-color: rgb(255, 255, 255); 
 
    perspective-origin: 27.75px 27.75px; 
 
    transform-origin: 27.75px 27.75px; 
 
    background: rgb(239, 83, 80) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(255, 255, 255); 
 
    border-radius: 50% 50% 50% 50%; 
 
    font: normal normal normal normal 14px/56px Roboto, sans-serif; 
 
    margin: 0px 0px 14px; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
    overflow: hidden; 
 
    transition: all 0.3s ease-out 0s; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="PINPOINT"> 
 
    <div id="BUTTON"> 
 
    <a href="javascript:void(0);" id="TEXT"><i class="fa fa-reply" aria-hidden="true"></i></a> 
 
    </div> 
 
</div>

Answer 1

Вы можете использовать Flexbox, чтобы сделать их выравнивания по горизонтали и вертикали центра. Вот код.

#PINPOINT { 
 
\t -webkit-appearance: none; 
 
\t width: 70px; 
 
\t height: 70px; 
 
\t margin: 15px auto; 
 
\t position: relative; 
 
\t z-index: 5000; 
 
} 
 

 
#BUTTON { 
 
\t -webkit-appearance: none; 
 
\t box-sizing: border-box; 
 
\t color: rgba(0, 0, 0, 0.870588); 
 
\t height: 70px; 
 
\t text-align: left; 
 
\t width: 70px; 
 
\t column-rule-color: rgba(0, 0, 0, 0.870588); 
 
\t perspective-origin: 227.828px 35px; 
 
\t transform-origin: 227.828px 35px; 
 
\t border: 0px none rgba(0, 0, 0, 0.870588); 
 
\t font: normal normal normal normal 14px/21px Roboto, sans-serif; 
 
\t outline: rgba(0, 0, 0, 0.870588) none 0px; 
 
\t position: fixed; 
 
\t right: 0; 
 
} 
 

 
#TEXT { 
 
\t -webkit-appearance: none; 
 
\t box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px; 
 
\t box-sizing: border-box; 
 
\t color: rgb(255, 255, 255); 
 
\t cursor: pointer; 
 
\t height: 55.5px; 
 
\t letter-spacing: 0.5px; 
 
\t position: relative; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t vertical-align: middle; 
 
\t width: 55.5px; 
 
\t will-change: opacity, transform; 
 
\t z-index: 1; 
 
\t transform-origin: 27.75px 27.75px; 
 
\t background: rgb(239, 83, 80) none repeat scroll 0% 0%/auto padding-box border-box; 
 
\t border: 0px none rgb(255, 255, 255); 
 
\t border-radius: 50% 50% 50% 50%; 
 
\t font: normal normal normal normal 14px/56px Roboto, sans-serif; 
 
\t margin: 0px 0px 14px; 
 
\t outline: rgb(255, 255, 255) none 0px; 
 
\t overflow: hidden; 
 
\t transition: all 0.3s ease-out 0s; 
 

 
\t /*Use flexbox property to fix this.*/ 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
 
<div id="PINPOINT"> 
 
    <div id="BUTTON"> 
 
    <a href="javascript:void(0);" id="TEXT"><i class="fa fa-reply" aria-hidden="true"></i></a> 
 
    </div> 
 
</div>