一個左側(cè)輸入驗(yàn)證碼的輸入框，右側(cè)獲取驗(yàn)證碼的按鈕，蘋果端樣式出現(xiàn)bug，求解！

實(shí)現(xiàn)一個左側(cè)input框，左側(cè)button獲取驗(yàn)證碼的效果，在微信開發(fā)者工具和安卓端顯示都沒問題，就是蘋果端樣式出現(xiàn)bug。，求解如何解決？

相關(guān)代碼

HTML代碼：

                        <div class="get-yzm">
                            <div class="text-box">
                                <input type="text" id="yzm" placeholder="輸入驗(yàn)證碼" style="font-size:14px;color: #999999;" />
                            </div>
                            <div id="getyzm">獲取驗(yàn)證碼</div>
                        </div>

CSS代碼：

.input-wrap .get-yzm{
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.input-wrap .get-yzm .text-box{
    flex: 1;
    overflow: hidden;
}
.input-wrap .get-yzm .text-box #yzm{
      padding: 16px 10px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
     background-color: #efefef;
    -webkit-appearance: none;
}
.input-wrap .get-yzm #getyzm{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30.1vw;
  /*height: 45px;*/
  font-size: 14px;
  color: #FFFFFF;
  background-color: #DEC27C;
}

頁面效果：
微信開發(fā)者工具：

蘋果端bug:

求教蘋果端的這個bug怎么解決？