Вращающаяся панель — переходы CSS нарушаются в Safari и Chrome — префикс поставщика не совсем эффективен

Я создаю простую вращающуюся панель, используя переходы css3 вместе с очень простой функцией jQuery для переключения класса, который вращает панель. Я сделал все возможное, настроив префиксы поставщиков (как вручную, так и с помощью автоматических служб префиксов), чтобы сделать Safari и Firefox счастливыми, но, увы, это не так.
В Safari текст и кнопка исчезают при повороте панели. .
В Chrome содержимое появляется с задержкой после поворота панели.

Обновление: решение здесь Backface-Visibility не работает должным образом в Firefox (работает в Safari), хотя и похож, не решает проблему, равно как и любой другой ответ, который мне удалось найти.

body {
  font-family: sans-serif;
  padding-top: 30px;
  background-color: #fff;
}

#card {
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ( 0px );
          transform: translateZ( 0px );
  -webkit-transition: -webkit-transform .7s, margin .4s;
          transition: transform .7s, margin .4s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  border: 1px solid black;
  border-radius: 6px;
}

#card.flipped {
  -webkit-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

#card .back {
  -webkit-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

.container {
  -webkit-perspective: 2000px;
          perspective: 2000px;
  width: 320px;
  height:300px;
  position: relative;
  margin: 0 auto;
  z-index: 100;
}

figure > div {
  padding: 12px;
}

.link {
  background: #dfdfdf;
  color: #006BA5;
  cursor: pointer;
  outline: none;
}

.link:hover {
  border: none;
  background: #006BA5;
  color: #fff;
  cursor: pointer;
}

button {
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  min-width: 100px;
  border-radius: 3px;
  border: 1px solid black;
}

Все мои файлы можно найти в этом репозитории/ветке: https://github.com/NickTerrafranca/Rotating-Panel/tree/cross_browser

Заранее большое спасибо!


jquery css vendor-prefix
person NickTerrafranca    schedule 17.09.2015    source источник
comment
Вопросы, требующие помощи по коду, должны включать желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения в самом вопросе. См. раздел Как создать минимальный, полный и проверяемый пример.   -  person Paulie_D    schedule 17.09.2015
comment
чтобы сделать Safari и Firefox счастливыми, это неправда. Firefox не нуждается в префиксах поставщиков для этих целей. Однако я понимаю вашу проблему. Скрипка здесь (вы должны сделать это раньше меня, но вы этого не сделаете): jsfiddle.net/tt9yvq5z   -  person Marcos Pérez Gude    schedule 17.09.2015
comment
Обратите внимание, что это: desandro.github.io/3dtransforms/examples/card-01. html отлично работает в firefox. Вы можете увидеть текущую спецификацию: developer.mozilla.org/es /docs/Web/CSS/ Это экспериментальный документ со статусом рабочий проект. Фаерфокс не виноват. Но, возможно, есть ошибка   -  person Marcos Pérez Gude    schedule 17.09.2015
comment
Просто чтобы вы знали, вы можете создать новую строку в уценке, завершив строку двумя пробелами или используя две новые строки — <br> не требуется.   -  person Pokechu22    schedule 17.09.2015

Ответы (1)


arrow_upward
0
arrow_downward

Проведя небольшое исследование, я нашел этот ответ от другого SO вопрос. То, что они сказали, должно было сделать это:

#card figure {
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

Посмотрите, подходит ли это вам.

ОБНОВЛЕНИЕ: проблема на самом деле связана с файлом background. Фон на #card закрывает спину. Так что добавьте это

//remove these styles from #card
#card figure { 
  background-color: #f9f9f9;
  border: 1px solid black;
  border-radius: 6px;
}

fiddle протестировано в Chrome, Safari и Firefox.

person cocoa    schedule 17.09.2015
comment
Это отличный совет, но, к сожалению, не решил проблему. - person NickTerrafranca; 17.09.2015
comment
@NickTerrafranca хорошо, я нашел настоящую проблему. Я обновлю ответ. - person cocoa; 17.09.2015