Safari не изменяет размер адаптивного радиального градиента фонового изображения ⇐ Html

[Anonymous]

Я использую радиальный градиент() внутри фонового изображения.
Используется радиальный градиент() чтобы создать адаптивный эллипс.
И в Chrome, и в Firefox размер градиента изменяется ожидаемым образом при изменении размера окна. В Safari размер не меняется. Единственный способ изменить размер в Safari — это если я внесу изменение в код, после чего он перерисуется и затем примет соответствующий размер, но тогда он останется в этом размере независимо от изменения размеров окна.
В связанной документации MDN в таблице совместимости браузеров внизу указано, что Safari полностью поддерживает все функции радиального градиента() и поддерживает все те же функции фонового изображения что Chrome делает. Поэтому я не думаю, что это обязательно проблема совместимости, хотя явно что-то не так.
Как заставить Safari правильно изменять размер этого градиента при изменении размера окна?Это происходит в Safari версии 18.2 на Mac.
Проблему можно увидеть, если запустить этот фрагмент кода в Safari, Chrome и Firefox отдельно. Запустите его, а затем измените размер окна. В Chrome и Firefox размер красного эллипса изменится. В Safari он сохранит тот размер, который был при первом запуске.

Код: Выделить всё

#inner-parent {
height: 50%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}

#child {
height: 100%;
width: 100%;
background-image: radial-gradient(ellipse 10vw 12vw at 50% 35%,
red 80%,
transparent 20%);
}

Код: Выделить всё

Похоже, есть много похожих вопросов. Никто из них не решает и не решает эту проблему. Ссылки на некоторые из них приведены ниже.



Вопрос
Комментарии




Safari не меняет размер фонового изображения
Нет ответы; не использует радиальный-градиент()


Фоновое изображение и радиальный градиент на адаптивном элементе?
Не относится к Safari


Радиальный градиент по фоновому изображению не работает в Safari
Использует устаревшие версии -webkit-radial-gradient(); ответы не решают проблему


Радиальный градиент CSS для Safari не работает
Использует устаревший -webkit-radial-gradient(); ответы не решают проблему


Как заставить радиальные градиенты работать в Safari?
< td>Устаревшие радиальные градиенты теперь полностью поддерживаются


Радиальный веб-кит CSS + iPad (Safari Mobile) не работает
Специально для мобильного Safari; противоречивые ответы




Подробнее здесь: https://stackoverflow.com/questions/793 ... l-gradient