Добавление rotate3d к тегу видео HTML5 заставляет панель управления переходить под видео в Safari - PullRequest
Новая
       23

Добавление rotate3d к тегу видео HTML5 заставляет панель управления переходить под видео в Safari

0 голосов
/ 04 марта 2019

У меня есть страница с видео в верхнем разделе.Когда пользователь нажимает кнопку воспроизведения, видео выполняет анимацию, когда оно поворачивает видео в его обычное состояние.Это выглядит хорошо во всех браузерах как на Chrome, так и на Firefox, но на Safari я получаю это (изображения ниже).Я не знаю, что вызывает такое поведение, кто-нибудь, почему сафари ведет себя так?

enter image description here

enter image description here

#video-container {
  perspective: 815px;
  flex: 1;
  margin-left: 50px;
  position: relative;
}

#video-container .video {
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  outline: none;
  width: 100%;
  transform: rotate3d(-.1,-1,0.05,25deg);
  transition: all 1s cubic-bezier(0.2, 0.8, 0.55, 1);
  box-shadow: 10px 10px 20px -3px rgba(0, 0, 0, 0.16),
  30px 30px 120px -30px rgba(0, 0, 0, 0.24),
  40px 40px 80px -40px rgba(0, 0, 0, 0.32);
}

#video-container .video-transform {
  height: 100%;
  transform-style: flat;
  outline: none;
  border-radius: 4px;
  outline: none;
  width: 100%;
  transform: rotate3d(0);
  transition: all 1s cubic-bezier(0.2, 0.8, 0.55, 1);
  box-shadow:  0px 10px 20px -3px rgba(0, 0, 0, 0.16),
  0px 30px 120px -30px rgba(0, 0, 0, 0.24),
  0px 40px 80px -40px rgba(0, 0, 0, 0.32);
}
...