См. шевроны на прикрепленных изображениях. Первый из настольного браузера Chrome. Таким образом он отображается в стандартных настольных браузерах, включая Safari. Он также отображается таким же образом в симуляциях устройств Chrome dev tools, включая iPhone 12, и на реальных устройствах Android.
На втором изображении показано, как он отображается на реальном iPhone 12 и симуляциях устройств (таких как lambdatest или стек браузера). Шеврон как минимум на 100% больше.
Я попытался добавить position: относительный стиль как к шеврону, так и к его родительскому div, но безуспешно. См. ответ Аарона Краусса в 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;
}
Попытался заменить минимальную высоту в div #alert-message-header, который содержит шеврон, на высоту: 48px;. Без изменений.
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>
Не могли бы вы отправить код css?
У вас есть явно указанный размер SVG? Я полагаю, что столкнулся с той же проблемой в одном из своих собственных проектов и определил явный размер (например, ширина: 2em; высота: авто;) исправил ее.
Добавлены html и css
Пожалуйста, добавьте также разметку svg. Вполне вероятно, вы сможете решить проблему, установив по умолчанию height
или width
. Safari имеет проблемы с вычислением ограничивающей рамки, если установлены только свойства min/max-width (или height).
@herrstrietzel не уверен, что вы подразумеваете под разметкой SVG - правило #alert-message.warning #alert-chevron css выше должно иметь то, что вы имеете в виду. Я только что попытался установить определенную высоту и ширину на 15, но это не повлияло.
мы не можем видеть, что «внутри» вашего упомянутого «chevron-up-yellow.svg» (относительные пути...). Поэтому, пожалуйста, добавьте фрагмент с разметкой/содержимым шевронов.
Добавлена разметка SVG.
preferences/advanced
, отметьте галочкой внизу экрана.Я надеюсь, что это может помочь вам: D
Спасибо, но я пробовал инструменты разработчика Chrome, и в этом случае симулятор содержится только в элементе <canvas>.
Как оказалось, lambdatest по крайней мере предлагал функцию инструментов разработки в симуляторе, и именно это позволило мне найти решение.
Я не знаю «почему», но удаление background-size: 100% auto; из шеврона (и сохранив его для значка оповещения) устранила проблему.
нам действительно нужно увидеть разметку шеврона.