Анимация SVG борется с Safari 13.1 (Mac OS и IOS)

Я только что понял, что последняя версия Safari (v13.1), которая поставляется с macOs 10.15.4 и iOS 13.4, больше не поддерживает анимацию CSS в файлах SVG. Я использую этот трюк для отображения анимации загрузки в моем портфолио. Теперь отображается только первый кадр файла провисания, а анимация не запускается. https://jbkaloya.com

Сафари 13.1

Никаких проблем с Chrome или Firefox, хотя.

Chrome (работает)

ИЗМЕНИТЬ

Вот соответствующие свойства CSS, в которых файл встроен на страницу.

.loading {
  background-color: $black-color;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  z-index: 1100;
  opacity: 1;
  transition: opacity .4s 0s cubic-bezier(.455,.03,.515,.955), z-index 0s 0s linear;
  
  &::before {
    content: '';
    background-image: url(../images/logoanimated.svg);
    background-position: center;
    background-repeat: no-repeat;
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	max-width: 22rem;
	margin: auto;
	left: 0;
	right: 0;
  }

Я предполагаю, что это также может быть связано с теми свойствами (которые находятся в файле svg и запускают последовательность анимации)

    {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
      }

Меня одного волнует этот вопрос?

Журнал изменений Safari 13.1: https://developer.apple.com/documentation/safari_release_notes/safari_13.loading { background-color: $black-color; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; z-index: 1100; opacity: 1; transition: opacity .4s 0s cubic-bezier(.455,.03,.515,.955), z-index 0s 0s linear; &::before { content: ''; background-image: url(../images/logoanimated.svg); background-position: center; background-repeat: no-repeat; position: absolute; display: flex; width: 100%; height: 100%; max-width: 22rem; margin: auto; left: 0; right: 0; }beta_release_notes


svg css css-animations safari svg-animate
person Jean-Baptiste Kaloya    schedule 01.04.2020    source источник
comment
сообщите об ошибке webkit в систему отслеживания ошибок webkit с помощью своего тестового примера.   -  person Robert Longson    schedule 01.04.2020
comment
О чем ты говоришь ? SMIL не поддерживается годами!   -  person Mister Jojo    schedule 01.04.2020
comment
@MisterJojo SMIL поддерживается в Firefox, Chrome и Safari. Однако этот вопрос касается анимации CSS, а не SMIL.   -  person Robert Longson    schedule 01.04.2020
comment
вы должны создать минимальный код, иллюстрирующий вашу проблему, а не весь сайт с сотнями строк кода, которые нужно очистить, чтобы понять, о чем вы говорите.   -  person Mister Jojo    schedule 01.04.2020
comment
@ MisterJojo Это правда, спасибо за ваш отзыв. Я отредактировал свой пост, чтобы сделать его более понятным   -  person Jean-Baptiste Kaloya    schedule 01.04.2020
comment
@RobertLongson Как ни странно, эта ошибка возникает только в последней версии Safari (13.1), а не в остальных браузерах webkit.   -  person Jean-Baptiste Kaloya    schedule 01.04.2020
comment
Несмотря на это, вы по-прежнему сообщите об этом здесь   -  person Robert Longson    schedule 01.04.2020
comment
Вы в итоге сообщили об этом? Кажется, я не могу найти его на их bugzilla, и я хотел бы сослаться на него.   -  person V. Rubinetti    schedule 21.05.2020

Ответы (2)


arrow_upward
6
arrow_downward

У меня была аналогичная проблема. Чтобы решить эту проблему, я использовал объект с типом image/svg+xml.

<object type="image/svg+xml" data="animation/some.svg">
person Brandy    schedule 29.04.2020
comment
Огромное спасибо! Это сработало отлично. Вы знаете техническую причину? - person Jean-Baptiste Kaloya; 30.04.2020
comment
@Jean-BaptisteKaloya Я не знаю, каковы особенности, но есть некоторые вещи, которые не разрешены для изображений SVG, если они встроены с тегом <img>. Я точно знаю, что им не разрешено загружать вещи из внешних ресурсов, например. веб-шрифты. Я бы сказал, что кто-то работал над этим кодом на webkit и случайно ввел регрессию. - person Fabian Tamp; 12.05.2020

arrow_upward
0
arrow_downward

У меня также была аналогичная проблема в Safari и iOS. Я решил эту проблему, используя тег <img> вместо встроенного тега <svg> и применения к нему CSS-анимации.

person patrickzdb    schedule 20.10.2020