iPhone端SVG渲染异常放大问题的解决方案求助

问题现象 #

• 桌面Chrome、Safari浏览器，Chrome DevTools模拟iPhone 12环境，以及安卓真机上，Chevron图标显示正常
• 真实iPhone 12设备，以及LambdaTest、BrowserStack等模拟环境中，Chevron图标被放大至少100%

已尝试的解决操作 #

• 为#alert-chevron按钮及其父容器#alert-message-header添加position: relative样式，无效果
• 参考针对Mobile Safari SVG问题的相关方案，未解决
• 将#alert-message-header的min-height: 41px替换为height: 48px，问题依然存在

需求 #

目前无法在iPhone真机或上述模拟环境中查看实际生效的CSS，恳请提供排查方法或修复建议

相关代码 #

Markup

<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;
}

SVG (chevron-up-yellow.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>

内容的提问来源于stack exchange，提问作者333Matt