一个左侧输入验证码的输入框，右侧获取验证码的按钮，苹果端样式出现bug，求解！

Question

实现一个左侧input框，左侧button获取验证码的效果，在微信开发者工具和安卓端显示都没问题，就是苹果端样式出现bug。，求解如何解决？

相关代码

HTML代码：

                        <div class="get-yzm">
                            <div class="text-box">
                                <input type="text" id="yzm" placeholder="输入验证码" style="font-size:14px;color: #999999;" />
                            </div>
                            <div id="getyzm">获取验证码</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;
}

页面效果：
微信开发者工具：

苹果端bug:

求教苹果端的这个bug怎么解决？

Answer 1

如果 safari 能重现的话，用 Mac + iPhone 调试一下吧。