Как я могу решить эту проблему с увеличенным рендерингом SVG, которая возникает только на iPhone?

См. шевроны на прикрепленных изображениях. Первый из настольного браузера 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>

нам действительно нужно увидеть разметку шеврона.

Robert Longson 10.11.2022 22:52

Не могли бы вы отправить код css?

MathiAs2Pique_ 10.11.2022 22:55

У вас есть явно указанный размер SVG? Я полагаю, что столкнулся с той же проблемой в одном из своих собственных проектов и определил явный размер (например, ширина: 2em; высота: авто;) исправил ее.

RiverTam 10.11.2022 23:34

Добавлены html и css

333Matt 11.11.2022 15:11

Пожалуйста, добавьте также разметку svg. Вполне вероятно, вы сможете решить проблему, установив по умолчанию height или width. Safari имеет проблемы с вычислением ограничивающей рамки, если установлены только свойства min/max-width (или height).

herrstrietzel 11.11.2022 17:12

@herrstrietzel не уверен, что вы подразумеваете под разметкой SVG - правило #alert-message.warning #alert-chevron css выше должно иметь то, что вы имеете в виду. Я только что попытался установить определенную высоту и ширину на 15, но это не повлияло.

333Matt 11.11.2022 19:43

мы не можем видеть, что «внутри» вашего упомянутого «chevron-up-yellow.svg» (относительные пути...). Поэтому, пожалуйста, добавьте фрагмент с разметкой/содержимым шевронов.

herrstrietzel 11.11.2022 20:42

Добавлена ​​разметка SVG.

333Matt 11.11.2022 22:54
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
8
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

  • Вы можете отлаживать симулятор с помощью safary, для этого сначала добавьте devtools в safary компьютера, вы можете включить его на preferences/advanced, отметьте галочкой внизу экрана.
  • Затем перейдите на свою веб-страницу в браузере симулятора.
  • Теперь вернемся к сафари вашего компьютера
  • Перейти в главное меню/разработка
  • Там найдите имя вашего симулятора и нажмите на эту опцию. (Сафари должен открыть инструменты разработки для страницы симулятора).

Я надеюсь, что это может помочь вам: D

Спасибо, но я пробовал инструменты разработчика Chrome, и в этом случае симулятор содержится только в элементе <canvas>.

333Matt 11.11.2022 14:11

Как оказалось, lambdatest по крайней мере предлагал функцию инструментов разработки в симуляторе, и именно это позволило мне найти решение.

333Matt 07.12.2022 13:50
Ответ принят как подходящий

Я не знаю «почему», но удаление background-size: 100% auto; из шеврона (и сохранив его для значка оповещения) устранила проблему.

Другие вопросы по теме