SVG анимация борется с Safari 13.1 (Ma c OS & IOS) - PullRequest
Новая
       77

SVG анимация борется с Safari 13.1 (Ma c OS & IOS)

0 голосов
/ 01 апреля 2020

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

Safari 13.1

Нет проблем с Chrome или Firefox tho.

Chrome (working)

РЕДАКТИРОВАТЬ

Вот соответствующие 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_1_beta_release_notes

1 Ответ

1 голос
/ 29 апреля 2020

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

<object type="image/svg+xml" data="animation/some.svg">
...