请看随附图片中的Chevron。第一个来自桌面Chrome浏览器。它在标准桌面浏览器（包括Safari）中以这种方式呈现。它也在Chrome开发工具设备模拟（包括iPhone 12）和真实的Android设备上以这种方式呈现。
第二张图片显示了它在真实的的iPhone 12和设备模拟（如lambdatest或browserstack）上的渲染效果，Chevron至少大了100%。
我试着添加一个位置：相对于chevron和它的父div的样式，但没有找到。请参考Aaron Krauss在Mobile Safari SVG Problem的答案。
我不知道如何从模拟中检查CSS，更不用说iPhone了。有什么建议吗？

加价：

<div id="alert-message" class="warning" aria-live="assertive">
<div id="alert-message-header" data-bind="click: toggleAlertMessageBody()">
    <span id="alert-icon"></span>        
    <span id="alert-header-text">Other shops may have earlier availability.</span>        
    <button id="alert-chevron" name="alert-chevron-btn" type="button"></button>
</div>
<div id="alert-message-body" >Body</div>

CSS：

#alert-message {
margin-bottom: 32px;
border: 1px solid;
border-radius: 5px;
font-family: 'Roboto';
font-style: normal;
}
#alert-message #alert-message-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 12px 16px 12px 16px;
min-height: 41px;
font-weight: 500;
cursor: pointer;
line-height: 26px;
position: relative;
}
#alert-message #alert-message-body {
margin: 0 15px;
padding: 8px 16px 12px 16px;
border-top: 1px solid;
color: #525656;
line-height: 26px;
font-weight: 400;
}
#alert-message.warning,
#alert-message.warning-info {
background-color: #fef6e8;
border-color: #e86421;
}
#alert-message.warning #alert-message-body,
#alert-message.warning-info #alert-message-body {
border-color: #e86421;
}
#alert-message.warning #alert-icon {
background: url("/Shared/images/alert-circle-yellow.svg") no-repeat;
min-width: 15px;
max-height: 25px;
background-position: center;
background-size: 100% auto;
}
#alert-message #alert-header-text {
padding: 0 10px;
color: #000000;
-webkit-box-flex: 1;
    -ms-flex-positive: 1;
        flex-grow: 1;
}
#alert-message.warning #alert-chevron {
background: url("/Shared/images/chevron-up-yellow.svg") no-repeat;
min-width: 15px;
max-height: 25px;
background-position: center;
background-size: 100% auto;
}
#alert-message #alert-chevron {
position: relative;
border: none;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
#alert-message #alert-chevron.collapsed {
-webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
        transform: rotate(180deg);
}
#alert-message b {
color: #000000;
}

已尝试将包含V形图案的#alert-message-header div上的最小高度替换为高度：48 px;。无变化。
SVG图形：

<svg xmlns="http://www.w3.org/2000/svg" width="15" height="9" viewBox="0 0 15 9">
<path fill="#E86421" fill-rule="nonzero" d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0 1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806 0 0 0 7.5 0"/>
</svg>