2

Можно было дополнить: ужасная отрисовка 3D в Firefox. Короче, вот картинка:
введите сюда описание изображения
Хром сглаживает и оптимизирует, с этой же непомерной задачей справляется даже Edge.
Но Фаерфокс люто решил испортить мнение о себе в очередной раз, после истории с багом позиционированных элементов во флексах, а также очень скудной и неоптимизированной поддержкой Mutation Observer, теперь я наткнулся на проблему касательно отрисовки 3D.
Есть такая загрузочка: codepen.
Или сниппет, в принципе:

.loading {
  position: relative;
  height: 98px;
  width: 68px;
  box-sizing: border-box;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: loadingRotate 3s ease-in-out 3s infinite;
  animation: loadingRotate 3s ease-in-out 3s infinite;
  will-change: transform;
}
.loading div {
  border: 1px solid #FF0099;
  position: absolute;
  box-sizing: border-box;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.loading .art1 {
  width: 20px;
  height: 40px;
  top: 0;
  left: 0;
}
.loading .art3 {
  width: 20px;
  height: 30px;
  top: 0;
  left: 24px;
}
.loading .art2 {
  width: 20px;
  height: 20px;
  top: 0;
  left: 48px;
}
.loading .art5 {
  width: 20px;
  height: 20px;
  top: 44px;
  left: 0;
}
.loading .art6 {
  width: 20px;
  height: 34px;
  top: 34px;
  left: 24px;
}
.loading .art4 {
  width: 20px;
  height: 30px;
  top: 24px;
  left: 48px;
}
.loading .art7 {
  width: 20px;
  height: 30px;
  top: 68px;
  left: 0;
}
.loading .art8 {
  width: 20px;
  height: 26px;
  top: 72px;
  left: 24px;
}
.loading .art9 {
  width: 20px;
  height: 40px;
  top: 58px;
  left: 48px;
}
.loading .art1 {
  -webkit-animation: loadingArts 0.4s ease-in-out 0.25s forwards;
  animation: loadingArts 0.4s ease-in-out 0.25s forwards;
}
.loading .art2 {
  -webkit-animation: loadingArts 0.4s ease-in-out 0.5s forwards;
  animation: loadingArts 0.4s ease-in-out 0.5s forwards;
}
.loading .art3 {
  -webkit-animation: loadingArts 0.4s ease-in-out 0.75s forwards;
  animation: loadingArts 0.4s ease-in-out 0.75s forwards;
}
.loading .art4 {
  -webkit-animation: loadingArts 0.4s ease-in-out 1s forwards;
  animation: loadingArts 0.4s ease-in-out 1s forwards;
}
.loading .art5 {
  -webkit-animation: loadingArts 0.4s ease-in-out 1.25s forwards;
  animation: loadingArts 0.4s ease-in-out 1.25s forwards;
}
.loading .art6 {
  -webkit-animation: loadingArts 0.4s ease-in-out 1.5s forwards;
  animation: loadingArts 0.4s ease-in-out 1.5s forwards;
}
.loading .art7 {
  -webkit-animation: loadingArts 0.4s ease-in-out 1.75s forwards;
  animation: loadingArts 0.4s ease-in-out 1.75s forwards;
}
.loading .art8 {
  -webkit-animation: loadingArts 0.4s ease-in-out 2s forwards;
  animation: loadingArts 0.4s ease-in-out 2s forwards;
}
.loading .art9 {
  -webkit-animation: loadingArts 0.4s ease-in-out 2.25s forwards;
  animation: loadingArts 0.4s ease-in-out 2.25s forwards;
}
@-webkit-keyframes loadingArts {
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes loadingArts {
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
@-webkit-keyframes loadingRotate {
  to {
    -webkit-transform: translateZ(0) rotateY(360deg);
    transform: translateZ(0) rotateY(360deg);
  }
}
@keyframes loadingRotate {
  to {
    -webkit-transform: translateZ(0) rotateY(360deg);
    transform: translateZ(0) rotateY(360deg);
  }
}
html {
  height: 100%;
  padding: 0;
}
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  margin: 0;
  -webkit-perspective: 300px;
  perspective: 300px;
}
<div class="loading">
  <div class="art1"></div>
  <div class="art2"></div>
  <div class="art3"></div>
  <div class="art4"></div>
  <div class="art5"></div>
  <div class="art6"></div>
  <div class="art7"></div>
  <div class="art8"></div>
  <div class="art9"></div>
</div>

Можете пооткрывать в разных браузерах.
И собственно, как быть-то? Есть какие-нибудь чудо-свойства с префиксом -moz-, чтобы всё сгладить, или нет? Или другие свойства анимации, а я устаревшим transform: rotateY() всё загубил?

4
  • В моём Firefox всё вроде довольно прилично i.imgur.com/mVP2Lht.png i.imgur.com/y4ltsiv.png
    – andreymal
    3 фев 2017 в 20:23
  • @andreymal, ну прекрасно... И в чём тогда моя проблема может быть?
    – wokalek
    3 фев 2017 в 20:24
  • проблема может быть в конкретной версии
    – Crantisz
    4 фев 2017 в 9:31
  • @Crantisz 51.0.1 (32 бита). Вроде как последняя)
    – wokalek
    4 фев 2017 в 9:34

2 ответа 2

2

Проблема решилась после добавления к div свойства outline: 1px solid transparent;

0
2

Данная проблема поднималась в этом вопросе.

Для решения проблемы используйте свойство:

img {
   image-rendering: optimizeQuality;
}
5
  • ОООО, это может даже решить другие мои некоторые мини-проблемы с отрисовкой и на IE... Надо попробовать. Спасибо!
    – wokalek
    4 фев 2017 в 10:35
  • Не, к сожалению, это не решило проблему. Ну и как я понял, это свойство для картинок? В коде нет ни одной такой.
    – wokalek
    4 фев 2017 в 10:38
  • @VostokSisters а какая версия FF? У меня вообще не крутится в FF)
    – user232857
    4 фев 2017 в 11:05
  • Ой, сори, я там свойство не убрал, пробовал хак с scale(0.9999) (тоже не работает). Теперь крутится. Версия: 51.0.1 (32 бита).
    – wokalek
    4 фев 2017 в 11:13
  • @VostokSisters после долгих экспериментов решил проблему) Внизу ответ.
    – user232857
    4 фев 2017 в 11:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.