How can I solve this enlarged SVG rendering problem that only occurs on iPhones?-CodePudding

See the Chevrons in the attached images. The first one is from a desktop Chrome browser. It renders this way in the standard desktop browsers including Safari. It also renders this way in Chrome dev tools device simulations including iPhone 12, and on real Android devices.

The second image shows how it renders on a real iPhone 12 and device simulations (such as lambdatest or browserstack). The Chevron is at least 100% larger.

I've tried adding a position: relative style to both the chevron and its parent div with no luck. Reference the answer by Aaron Krauss at

Markup:

<div id="alert-message"  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;
}

Tried replacing the min-height on #alert-message-header div that contains the chevron with height: 48px;. No change.

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>

CodePudding user response：

You may debug the simulator with safary, to do that, first add the devtools on the computer's safary, you can enableit on preferences/advanced, mark the checkbox at the bottom of the screen.
Then navigate to your web page on the simulator's browser
Now back to the safary of your computer
Go to the main menu/development
There, search for your simulator's name and click on this option. (The safary sould open the development tools for the simulator's page).

I hope this could help you :D

CodePudding user response：

I don't know the "why" but removing the background-size: 100% auto; from the chevron (and keeping it for the alert-icon) fixed the issue.